Trying to manipulate CSS style with jQuery

Question

I have a navigation bar at the side of a page and want to highlight one of several entries depending on GET-parameters.

After a little Reading I came to this solution, but it does not seem to work:

in the .html:

<script type="text/javascript">
    $(document).ready(highlight_me());
</script>

the JS functions:

function highlight_me() {
    // ensure all links have class 'regular'
    document.links.className = 'regular';
    // determine which link to highlight
    var id = 'home';
        switch (querystring('view')) {
            case "set":
                id = 'settings';
                break;
            case "mc":
                id = 'messages';
                break;
            default:
                id = 'home';
        }
    // highlight link
    document.getElementById(id).className = 'highlight';
}

function querystring(key) {
    // extract GET-value for key
    var re = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'gi');
    var r = [], m;
    while ((m = re.exec(document.location.search)) != null) r[r.length] = m[1];
    return r;
}

the CSS classes:

a, a.regular, a:visited {
    color: #f0ce96;
}

a:active, a:hover, a.highlight {
    text-decoration: underline;
    color: #ffeebb;
}

I'd be thankful for a hint that points me to where I go wrong, here.

Gori · Accepted Answer · 2012-06-17 06:47:58Z

3

You are not passing the "id" parameter when you call the highlight_me function.

answered Jun 17, 2012 at 6:47

Gori

3613 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Rae the Git Over a year ago

the id parameter is optional - if none or other than the specified ones are given, id defaults to 'home'

Gori Over a year ago

the JS seems to be right, I don't know much about regular expressions but did you debug the querystring function to check if it is doing what you want?

Rae the Git Over a year ago

Ah... could have thought of that myself. This is, where the problem seems to be - i just copy-pasted that function from somewehere, because someone stated that it worked, so I actually have no real idea, what this piece of code finally does...

Gori Over a year ago

check this netlobo.com/url_query_string_javascript.html it seems to work for me.

Rae the Git Over a year ago

With that, I seem to get no result at all from the query string function. I inserted a simple alert(results) and also tried with alert(results[1]) before the if-clause, but never got anything back other than null.

|

Sidd · Accepted Answer · 2012-06-17 07:02:57Z

1

Any reason why you need id as a parameter? You're not using it anywhere inside the function. Shouldn't a call to querystring be enough? In that case, you don't need to do the if(id.length) part. Set id to 'home' by default, and then have the switch statement to modify the variable accordingly.

Here's what I'm talking about:

function highlight_me() {
// ensure all links have class 'regular'
document.links.className = 'regular';
// Set id to home by default
var id = 'home';
    switch (querystring('view')) {
        case "set":
            id = 'settings';
            break;
        case "mc":
            id = 'messages';
            break;
        default:
            id = 'home';
    }
// highlight link
document.getElementById(id).className = 'highlight';
}

answered Jun 17, 2012 at 7:02

Sidd

1,2182 gold badges12 silver badges29 bronze badges

1 Comment

Rae the Git Over a year ago

Good point for simplyfying the function, but I planned on... yeah, what was I actually planning on in the first case? ;) But unfortunately, the real problem has been already tracked down to the querystring function not working properly, so this does not help to selve this :/

4b0 · Accepted Answer · 2012-06-17 07:02:42Z

0

function $(highlight_me()); want a parameter id which is not supply when you call this function.And put your function inside document.ready.

 $(document).ready(function() {
   // put all your function here.
 });

edited Jun 17, 2012 at 7:02

answered Jun 17, 2012 at 6:53

4b0

22.4k30 gold badges97 silver badges143 bronze badges

1 Comment

Rae the Git Over a year ago

As i stated in answer to Papaya's suggestion, the parameter id is optional an defaults to 'home' if not specified or other than defined values (at least my IDE also says so). But putting it this way: $(document).ready(highlight_me) at least made the 'home' part work

Collectives™ on Stack Overflow

Trying to manipulate CSS style with jQuery

3 Answers 3

17 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

17 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related