We Keep Coding

Make navigations items change color when active

I have the html code
<header> <nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
the css code :
a {
color: #7e7e7e;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #444;
}
a.active {
color: #82b965;
}
nav {
float: right;
padding: 20px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: #333333;
}
and javascript is:
$(document).ready(function(e) {
$("nav a").on(function(){
$("nav a").removeClass("active");
$(this).addClass("active");
});
});
what I want is that when any button will active that time the color will be green,and other will remain same color.and I want to put them in the middle,and needs to be little big space between them.
the jsfiddle is:
jsfiddle code
I have done this..But not working..

$(document).ready(function(e) {
$("nav a").click(function(){
$("nav a").removeClass("active");
$(this).addClass("active");
});
});
Fiddle:https://jsfiddle.net/130w0y9c/
To make nav links center
Updated Fiddle:https://jsfiddle.net/130w0y9c/1/

there were some small errors. just use click() function if you use jquery anyway.
working fiddle:
https://jsfiddle.net/94b94u1g/

http://codepen.io/anon/pen/QbZdWr Done, working... the main problem was the on click
$(document).ready(function(e) {
$("nav ul li a").on("click", function(){
$("nav ul li a").each(function () {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});

You had two errors:
First, as #Andrew said, Home should be Home.
Secondly, your use of the .on function in jQuery was missing out your target event. $("nav a").on(function(){... should have been $("nav a").on("click", function(){... . Also, if you're going by the codepen, make sure you have jQuery running it.
http://codepen.io/anon/pen/MwPJWZ

I'm trying to select a nested ul, tried with css but having trouble

I have a cms rendering the menus for a website I am designing and I need to select the children of the parent menu items. Here is how the code is generated:
<div class="menu">
<ul>
<li></li>
<li><a href="" class="CurrentButton" ... />text</a>
<div>
<ul></ul>
</div>
</li>
</ul>
</div>
I have tried this CSS to try to select it but it's been unsuccessful as of yet aside from the display :none;
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton div {
display: block;
}
can anyone see what I'm doing wrong? Would a jquery function be easier? I'm fairly new to jquery so I'm not sure how to go about writing a function for it.
I am trying to select the div within the li when the anchor within that li has the class CurrentButton, if the anchor within the li doesn't have the class then I want it hidden

Both of the examples you give rely on finding the .menu element, but none exists in your code. it does now.
a.CurrentButton div selects any divs inside of any a.CurrentButtons. However, your divs are not inside the as. Try this:
.menu ul > li > a {
//selects all the as, but non of the divs
}
.menu ul > li > * {
//selects anything inside a 'li', both 'a's and 'div's
}
To select divs that follow a.CurrentButtons, use this:
.menu ul li > a.CurrentButton + div {
//any 'div's that are directly after 'a.CurrentButton'
}

If you really need to be specific, use the adjacent elements operator ( + )
.menu > ul > li > a.CurrentButton + div {
Otherwise, you are targeting a div that is the descendent of CurrentButton and that doesn't exist.
If you don't need to be so specific, use the same selector as before:
.menu > ul > li > div {

Assuming the <ul> above is a child of an element with the class .menu, the <div> above is not a child of a.CurrentButton, so you should select it like this:
.menu > ul > li > div {
display: block;
}
Just so you know > only selects direct children of an element.

Try this:
In your HTML div is a sibling of a.CurrentButton. So, you should use + sign.
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton + div {
display: block;
}

Change opacity of other tab when I hover current tab

I create a dropdown menu. I need when I hover to a tab, the opacity of other tabs in menu are change except the current tab I hover.
Example: when I hover to Home Tab, state of Home tab and list item is not changed (yellow color, opacity=1) but other tabs (Tutorial, Article, Inspiration) are changed (grey color, opacity=0.5)
<code>http://jsfiddle.net/dennisho/6fX42/2/</code>

There is no sibling selector that will select all siblings to help select the other menu elements but you can use the :not selector
nav > ul:hover li:not(:hover) {
opacity:0.5;
}
JSFiddle Demo

You could do something like this.
nav ul li {
background-color: yellow;
}
nav ul li:first-of-type {
border-top-left-radius:25px;
border-bottom-left-radius:25px;
}
nav ul li:last-of-type {
border-top-right-radius:25px;
border-bottom-right-radius:25px;
}
nav > ul li:hover{
opacity:1;
}
nav > ul li:not(:hover){
opacity:0.5;
}
But please include relevant code in your question so it is helpful for other people, too.

CSS and Jquery: addClass not overwriting css

I have a script that adds a class to an element on hover.
Issue is the new, added class does not seem to 'overwrite' the existing css (even though on my style sheet the added class is listed below the existing css).
I cannot use removeClass on the element as there is no actual initial class styling the element.
The 'initial' styling that needs to be overwritten is:
#menu ul li ul li {
background-color: #ccc;
}
The class that needs to be added is:
.whitebg {
background-color: #fff;
}
My script is:
$('#menu ul li ul li').hover(
function() {
$(this).addClass('whitebg');
},
function () {
$(this).removeClass('whitebg');
}
);
Does anyone know a way I can fix this up?
Thanks!

id selectors take precedence over class selectors. You need !important
.whitebg {
background-color: #fff !important;
}

This is because of the specificity. you can use !important as the other posts suggested but
using !important in your CSS is a bad practice.
Use that as you last option.
Instead use two classes..
Make sure the inner most li has the default class to it..
$('#menu ul li ul li').addClass('default').hover(
function() {
$(this).addClass('whitebg').removeClass('default');
},
function () {
$(this).removeClass('whitebg').addClass('default');
}
);
Check Fiddle

Simply add the !important tag to the background-color in .whitebg class. That should fix your problem.

then, you need code this:
#menu ul li ul li {
background-color: #ccc;
}
#menu ul li ul li.whitebg {
background-color: #fff;
}
Only in this way, can we have a common parent class.
!important will be a compatibility problem.

Jquery to set img dimensions from parent

Im doing a nav.
Its a ul list. the 'a' tags and 'span's are in the same space and the span contains an image that is hidden.
The image does fadeIn/fadeOut which is successful.
Im trying to set the width of the img/span to the width of the li(the parent)
i cant seem to friggin do it. please help.
<ul id="nav">
<li>Web<br />Design<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>Graphic<br />Design<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>Our<br />Work<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>SEO<span><img src="images/nav-over.png" height="100px" /></span></li>
</ul>
this was kinda on the right path...
var h = $('#nav li img').parent().height();
var w = $('#nav li img').parent().width();
$('#nav li img').width(w).height(h);
but it set all of the #nav li span height and width the same and not from the parent...
then i've tried this :
$('#nav li span').each(function(){$(this).parent().width()});
$('#nav li span img').each(function(){$(this).parent().width()});
which i know is poorly structured but i was just testing. but no it didn't work...
so for each #nav li span and #nav li img i want to set the width to the corresponding parent(li) width.
i think i explained this correctly. lol. thanks.
heres the css
#nav {
list-style:none; width:608px; height:100px; display:block; padding:0; margin:0; position:relative
}
#nav li {
background:url(images/nav-div.jpg) right top no-repeat; float:left; text-align:center;height:100px;
}
#nav li a {
color:#565555; font-size: 18px; letter-spacing:10px; line-height:25px; text-transform:uppercase; text-decoration:none;height:100px; display:block; padding:0 19px 0 19px; position:relative; top:0; left:0;z-index:900
}
#nav li a:hover {
color:#eaeaea
}
#nav li span {
position:relative; top:-100px; left:0; z-index:800; opacity:0.0;
}

Use .width() where you have .each(), and use .closest("li") instead of .parent(), and don't forget the return statements:
$('#nav li span img').width(function () { return $(this).closest("li").width(); });
$('#nav li span img').height(function () { return $(this).closest("li").height(); });
http://jsfiddle.net/KzhgQ/
Edit: Here's a more efficient version that prevents looping the images twice (thanks natedavisolds) :
$('#nav li span img').each(function () {
var img = $(this);
var listItem = img.closest("li");
img.width(listItem.width()).height(listItem.height());
});
http://jsfiddle.net/KzhgQ/1/

Call me crazy, but couldn't/shouldn't you be doing this with CSS?:
#nav li img {
width: 100%;
}

Assuming the CSS is set correctly (ie. block elements).
$('#nav li').each(function() {
var $li = $(this);
$li.find('span, span img').css({ width: $li.width(), height: $li.height()});
});
should work but untested.