Problem with JQuery changing background-color in CSS

Question

What I have is a basic navigation with five links. The navigation bar has a background image and a darker shade when there's a mouse hover. What I'm trying to do is add a little jquery script to the top of each page to change the color of the link of the current page to the hover color... ie. if I'm on the contact page the contact link on the nav bar would be the darker color so that it's very obvious which page you're on. So far I have this:

<div class="navigation">
    <ul>
    <li><a href="index.html" id="home">Home</a></li>
    <li><a href="reviews.html" id="reviews">Reviews</a></li>
    <li><a href="guestbook.html" id="guestbook">Guestbook</a></li>
    <li><a href="book.html" target="_blank" id="about">About</a></li>
    <li><a href="contact.html" id="contact">Contact</a></li></ul>
</div>

and then something like this at the top of each of the pages (here would be the one for reviews.html)

<head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
            $('#reviews').css("background-color", "#6d7f45"); 
        });
    </script>
</head>

But it's not working at all. I've just started using JQuery so I'm sure it's something simple, but I've tried a number of solutions on my own and I'm stumped.

CSS:

div.navigation {
    width: 950px;
    background-image: url('../images/navbg.png');
    letter-spacing:2px;
    height: 35px;
    background-color: #679847;
    text-transform:uppercase;
}

div.navigation ul {
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 10px;
    list-style:none;
}

div.navigation li {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

div.navigation a {
    background-image: url('../images/navbg.png');
    text-decoration: none;
    padding: 8px;
    color: #FFFFFF;
}


div.navigation a:link {
    color:#FFFFFF;
    text-decoration:none;
}      /* unvisited link */

div.navigation a:visited {
    color:#FFFFFF;
    text-decoration:none;
}  /* visited link */


div.navigation a:hover {
    background-image: url('../images/navbg_hover.png');
    color:#FFFFFF;
    text-decoration:none;
    background-color: #6d7f45;
}  /* mouse over link */

div.navigation a:active {
    color:#FFFFFF;
    text-decoration:none;
}  /* selected link */

My guess is either your jQuery isn't loaded or a more specific CSS rule exists. — Marcel, May 31 '11 at 04:02
Either that or, the anchor tags are not set as display block... — Hailwood, May 31 '11 at 04:04
Is there an error, or is it just doing nothing? Can you try putting an alert in the $(document).ready() function to make sure it is firing? — JohnFx, May 31 '11 at 04:05
No error, it's just not changing the color. I put an alert at the top of the script and $(document).ready() is definitely firing. — Slappy Griddleson, May 31 '11 at 04:08
Next try commenting out the reference to the style sheet on the page to see if it is interfering. — JohnFx, May 31 '11 at 04:10
Also, try putting an alert in the ready function to see if it is finding the selector "alert($('#reviews').length);" You should get dialog with the number 1. — JohnFx, May 31 '11 at 04:11
also make sure if it's the png that you're using that's not showing transparency, causing it to block out the background color <_ — Populus, May 31 '11 at 04:13
I'm not entirely sure how to make sure the .png is not transparent. It's definitely able to find the #reviews selector, it returned 1. Unfortunately I'm working on this locally so I cannot provide a link. — Slappy Griddleson, May 31 '11 at 04:22
Alright... took out background-image: url('../images/navbg.png'); from div.navitation a {} in my CSS and stuck it under div.navigation and it's finally working. Thank you all so much for your help!!! — Slappy Griddleson, May 31 '11 at 04:26
Glad it worked for you. If you haven't already, it would be good to upvote Populus' comment. — g_thom, May 31 '11 at 04:29
Sadly I'm new and don't have the 15 rep points to upvote, otherwise I'd upvote everyone =( — Slappy Griddleson, May 31 '11 at 04:33
Np, I've done it so. I also added a small code snippet below to make the highlighting of your links automatic. — g_thom, May 31 '11 at 04:57

g_thom · Answer 1 · 2011-05-31T05:03:50.823

The basic code you posted works - see jfiddle

for an example. As Hailwood indicates, something else is likely going on and more info will be needed. A link to your page would be easiest.

Since the OPs question is solved, I'm adding this snippet to make the maintenance of the menu a little easier, using the page url to set the selector rather than having to change the code manually on each page as the poster indicated:

<script type="text/javascript">
    $(document).ready(function () { 
        var url = document.location.toString();
        var url_array = url.split("/");
        // get last item in array
        var last = url_array[url_array.length-1];
        $('.navigation a').each( function() {
          // if it matches
          if ($(this).attr('href').indexOf(last) != -1)
          $(this).css('background-color', '#6d7f45');
        });
    });
</script>

score 0 · Answer 2 · answered May 31 '11 at 04:01

0

Can we please see some css for your menu?

Also, I might suggest you use

$(function(){}) as opposed to $(document).ready(function(){})

I think I know what is going on, but I need to see your css to be sure.

answered May 31 '11 at 04:01

Hailwood

89,623
107
270
423

those two are the same, the former being a shorter version. See: http://stackoverflow.com/questions/1388043/different-forms-of-document-ready – Populus May 31 '11 at 04:06

score -1 · Answer 3 · answered May 31 '11 at 04:05

-1

It's:

$('#reviews').css("backgroundColor", "#6d7f45");

answered May 31 '11 at 04:05

Populus

7,470
3
38
54

background-color is the right syntax - perhaps you are thinking of animate()? – g_thom May 31 '11 at 04:07
Ok i've tried both 'background-color' and 'backgroundColor' again, they both work... I was not right, but I wasn't wrong <_< no need to minus me, I've always used backgroundColor – Populus May 31 '11 at 04:10
Whether it works or not, it still doesn't answer the question or get the OP closer to an answer. – JohnFx May 31 '11 at 04:13
Well I thought it did as that's what I use normally. It's not a wrong answer, but an alternative syntax... the above post would be more irrelevant as it's not even an answer... – Populus May 31 '11 at 04:15
Regardless of other answers, this still doesn't answer the question. It answers the question "What is an alternative syntax for setting the background color". Ironically, you posted a comment that has the CORRECT answer, and posted this as a comment. I would have upvoted you if you put your comment in an answer. – JohnFx May 31 '11 at 14:30

Problem with JQuery changing background-color in CSS

3 Answers3