Code for active menu item works great on one site but not another...

[m_hutchins]

Hello All, I've been having an issue with getting this code to work on one site that was copied from another site that it works fine on. The code is basically to make the main navigation button show an "active" style to reflect what page (section/page) your on. The site I'm trying to get it work on now is: http://mototrbo.spcomm.com and this is the code I'm using: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('current-menu-item'); $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); } }); }</script>

 

Any thoughts and/or help would be greatly appreciated!

 

Thanks in advance,

mh

[justsomeguy]

That code expects a particular HTML structure, so I'm guessing you don't have that structure on the page where you're trying to use it. Maybe you forgot to include jQuery also. Look for error messages in your browser's console.

[m_hutchins]

I'm not sure I'm following about the HTML structure. Everything on the page (as far as I can tell) is setup pretty much the same as the site that the code is working on. I also have this script right above the previously provided code:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

I have tried to include a different jQuery file and script with no luck.

[justsomeguy]

Everything on the page (as far as I can tell) is setup pretty much the same

"Pretty much" might not cut it. Look at what the code is looking for.

        $("#menu a").each(function () {            var href = $(this).attr('href');            if (path.substring(0, href.length) === href) {                $(this).closest('li').addClass('current-menu-item');                $('li.current-menu-item').parents().not('ul').addClass('current-menu-item');            }        });

It looks for an element with the ID "menu", which contains a elements. It gets those and loops through them. It gets the href of each one and compares it with the path in the URL (so those need to match - the href links need to contain the correct path). If it matches, then it looks for the closest li element and adds a class to it, then it gets that same element (li.current-menu-item), gets parent elements that are not ul elements, and adds the current-menu-item class to them also. So, if your page has a different structure then that code is obviously not going to do the same thing to it.If you think that this if statement is not matching:

if (path.substring(0, href.length) === href)

Then verify what it is checking:

console.log('href: ' + href);console.log('path: ' + path.substring(0, href.length));if (path.substring(0, href.length) === href)

[m_hutchins]

I believe everything is good with the structure. They both pretty look like this:

 

<ul id="menu"> <li class="drop"><a href="/about-us/index.htm">About Us</a> <ul> <li><a href="page.htm">

 

And the id and class names are either the same or are correct and match the menu. I'm pretty much stumped here.

[justsomeguy]

Well, either add some breakpoints to the code and step through it, or add some console.log statements to have it print everything out so that you can verify what it's doing. Make sure that $("#menu a") is returning a list of elements, and inside that loop print out everything that it is using or checking. When in doubt, just verify what the code is actually doing when it runs.

[dsonesuk]

Maybe conflict with theme jQuery use 'jQuery' instead of '$'