JQuery add class to wordpress nav menu depending on page href (not working in IE7/8)

Question

This script adds an active class to the current page in a wordpress generated nav menu (changes color & adds small background image arrow). However the document.ready function isn't working in IE 7 & 8.

JQuery:

$(document).ready(function(){
    $('#menu-top-menu a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("active");
    });
});

CSS:

.active {color: #41A2FF !important; background-image: url('navarrow.png'); background-repeat: no-repeat; background-position: 50% 3%; padding-top: 10px;}

I've googled this a lot and looked at a number of topics on this forum relating to similar IE <9 problems, and a few answers seemed to point to the window. and .href declarations but I couldn't seem to figure out exactly why It wasn't adding the class. Any help would be appreciated as my knowledge on jquery is limited.

-Thanks

...problem solved, .trim() wasn't working in IE : if($(this).attr("href") == window.location)

document.ready should work, so problem is somewhere else. Try $(this).attr("href").trim() instead. — Samuli Hakoniemi, Nov 23 '12 at 11:09
didn't seem to work, tried as: ' if(this.attr("href").trim() == ' aswell — MattHeywood, Nov 23 '12 at 11:20
I guess the two values (probably window.location) is reported differently in IE7/8. Have you tried printing them to the console so you can see why the condition is not hitting? — Rory McCrossan, Nov 23 '12 at 11:23
ah sorry yes, in the console it was the .trim() that was not hitting. this has worked: if($(this).attr("href") == window.location) — MattHeywood, Nov 23 '12 at 11:35
additional : to get the .trim() working I could have also used the answer from this topic - http://stackoverflow.com/questions/2308134/trim-in-javascript-not-working-in-ie[link] — MattHeywood, Nov 23 '12 at 12:03
yes thank you, hence why I upped your original comment :) .. I ended up needing the trim for my sub menu active states, so this solution was the most appropriate. I have another slight edit to this here http://stackoverflow.com/questions/13528868/jquery-active-class-keep-class-on-main-nav-add-class-to-sub-nav[link] which is a slight problem — MattHeywood, Nov 23 '12 at 12:41
Please add your solution as an answer and accept that. This way your question won't remain in the "Unanswered" section. — Nikola Ivanov Nikolov, Nov 23 '12 at 13:27

score 0 · Answer 1 · edited May 23 '17 at 11:48

To get .trim() working in ie7 & 8, if must be added in header:

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

Without using .trim():

$(document).ready(function(){
    $('#menu-top-menu a').each(function(index) {
       if($(this).attr("href") == window.location)
            $(this).addClass("active");
    });
});

...however the second method limited me to only being able to apply the class to top level navigation

JQuery add class to wordpress nav menu depending on page href (not working in IE7/8)

1 Answers1