change color to #fff on link click - javascript

I have a href link "Open Menu", and this link have color gray.
I want to use jQuery, for, when I click in this "Open Menu", I want change the color to #FFF.
Im trying to do this with my code below but its not working, I was searching how to do this, but I am having more difficulties because of my icon font element .
Do you see where Im doing wrong?
html:
<li class="show_menu">Open Menu
<p id="menu_toggle" > <span class="change_color" >
<i class="fa fa-bars"></i></span>
</p>
Css:
#menu ul .show_menu span >i .change_color{color:#fff;}
jQuery:
$(function() {
$("#menu ul .show_menu span >i").click(function() {
$(this).addClass(".change_color");
});
});

You don't need to specify the dot . for class name that you want to add when using .addClass():
$(function() {
$("#menu ul .show_menu span >i").click(function() {
$(this).addClass("change_color");
});
});
Also do not leave space between i and .change_color in your CSS since space will target the descendants with class change_color of i elements instead:
#menu ul .show_menu span >i.change_color{color:#fff;}

Related

Inline block not displaying

I am trying to have a li element and a div be "inline", but right now the div text keeps being put right below the li element. I'm using display: inline block and jQuery as below:
$('#list').append(
'<div class="spanish">\
<li>'+new_task+'</li>\
<div>Test</div>\
</div>');
.spanish {
display:inline-block;
}
As #ValeriySiestov mentioned, div is a block element, and li is a block element as well.
One way to fix your problem is to change the structure of the html you are appending, so it is a span element within the li element.
Note that list elements (i.e. uls or ols) can only have lis as their children, but lis can have anything as their children. Reference: Can I use a div inside a list item?
Assuming you have an unordered list with id #list, you can append a new list item to it like so:
var new_task = "walk the dog"
var li_string = `<li>${new_task}: <span>Test</span></li>`
$('#list').append(li_string);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>make bed</li>
<li>brush teeth</li>
</ul>
Note the variable new_task is being interpolated within the string of html being appended to the list using template literals.
Template literals syntax:
string text ${expression} string text
div - is a block (display: block) element by default. It stretches to 100% of parent's width
li - is an item of the list (display: list-item) and also stretches to 100% of parent's width
If you want to change this behaviour, you need to add to div and li another display value, like this
.spanish div, .spanish li {
display: inline;
}
or
.spanish div, .spanish li {
display: inline-block;
}
In your code, you use inslide , this is not actualy right, this is not critical, it will work, but must be inside
It seems from you code. You want to print div below li. There are few things to note:
Li should always come inside UL or OL tag. You current code is semantically wrong.
There can be only Li come as sibling of Li. No any other tag (You are using div)
For position use css.
Please check below answer if its helpful to you.
$( document ).ready(function() {
var new_task = "<div class='row'>row</div>";
$('#list').append(
'<div class="spanish">\
<ul>\
<li>'+new_task+'<div class="sub-row">Test</div></li>\
</ul>\
</div>');
});
.row {
display: inline;
clear:both:
widht:100%
}
.sub-row {
display:inline;
clear:both;
margin-left:2px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>

Can you transition a display property? If not, what's the best solution?

I'm trying to do a transition on a list item:
HTML
<ul>
<li class="resume"><i class="fa fa-file-text-o"></i> Resumé</li>
<li><i class="fa fa-instagram"></i> Bio</li>
<li id="backtoprojects" class="is-hidden"></i> Back to Projects</li>
</ul>
Javascript
$('#backtoprojects').removeClass('is-hidden');
// hide back-to-projects-button on click of "backtoproject"
$('#backtoprojects a').on('click', function(){
hasher.setHash();
$('#backtoprojects').addClass('is-hidden');
});
$('[data-type="projectDie"]').click(function() {
$('body').removeClass('projectLoaded');
return false;
})
;
CSS
.navbar ul li.is-hidden {
display: none;
}
So right off the bat the "Back to Projects" is hidden, it appears when a project is clicked on, and if you click on "Back to Projects" again it hides itself. I tried swapping display:none for opacity or visibility but you can still see the spacing as if "Back to Projects" was still there. I envisioned the "Back to Projects" link to slide in from the right as the entire <ul> is float: right.
Try something like this:
$('#backtoprojects').hide();
$('a').on('click', function(){
$('#backtoprojects').show('slow');
});
$('#backtoprojects').on('click', function(){
$(this).hide('slow');
});
Full code here: https://jsfiddle.net/hdbj2rec/1/
Or you can use CSS to hide #backtoprojects initially.

jQuery - Can't show dropdown list upon clicking a link

I have a header and am trying to create a drop-down menu without Bootstrap.
When I click on a link, I want the drop-down menu to appear. It's hidden by default. I tried using jQuery to show the list.
HTML
<div class="menu">
<div class="menu_center">
Products
<ul>
<li>Clothing</li>
<li>Stationary</li>
<li>Other
</ul>
Promotions
About Us
<ul>
<li>Philosophy</li>
<li>Our Suppliers</li>
<li>Contact</li>
</ul>
Your Cart:
<ul>
<li>Tech{Yourself} T-Shirt: Blue, Large - $19.95</li>
<li>Tech{Yourself} Owl Plush Toy - $19.95</li>
<li><b>Total: $39.90</b> <button class="js-check-out">Check Out</button></li>
</ul>
</div>
</div>
CSS
html body{
font-family:'Open Sans',sans-serif;
font-size:16px;
line-height:18px;
color:#000;
font-weight:400;
}
.menu_center a {
text-decoration: none;
}
jQuery
$(document).ready(function() {
$(".menu_center ul").hide();
$(".menu_center > a").on("click", function() {
$(this).children("ul").show();
});
});
http://jsfiddle.net/9ov9za3r/1/
Not sure why this isn't working.
The ul element is not a child of the a element, you would need to do:
$(this).next("ul").show();
jsfiddle
Replace this:
$(this).children("ul").show();
by this:
$(this).next("ul").slideToggle();
The ul is not the children, its the next element right after the a tag
and you might want to use toggle(), fadeToggle() or slideToggle() rather than just show() to be able to hide the menu again when u click on it after it appears
Here is the JSFiddle demo

span text length of column (or li)

I have a mouseover function that changes the background-color of the span of an li element, but the background-color change only changes the background of the span text and not the entire length column. How can I extend the background-color to the entire length of the column without changing the li element's background-color. I do not want to change the li element's background-color because the li element may contain children ul and li elements who's background color I do not want to change.
JSFiddle: https://jsfiddle.net/8d965kbd/
HTML:
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH BELOW HIGHTLIGHT)</span>
<ul>
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH ABOVE HIGHTLIGHT)</span>
</li>
</ul>
</li>
jQuery:
$(function(){
$(document).on({
mouseenter: function () {
$(this).css('background-color', 'green');
},
mouseleave: function () {
$(this).css('background-color', 'white');
}
}, ".text");
});
May be something like this : https://jsfiddle.net/vtoe5eqx/1/
display:inline-block; //add it to the text class
You can add display:block; onto the span.
https://jsfiddle.net/8d965kbd/3/
Instead of using <span> use <div> instead, the reason is that <span> is just an inline-block element while <div> is a block element.
Meaning <span> width is default to auto which will only base its width on the content while <div> will set its width to 100% regardless of the content, that's why when you apply a background-color change for <span>, it only fills up only by its width.
Update: You can also use other block elements as an alternative aside from <div> such as <p> <h1> ~ <h6>

Change class name of anchor tab inside list

I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}
If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo
If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/

Categories

Resources