m_hutchins Posted April 23, 2015 Share Posted April 23, 2015 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 23, 2015 Share Posted April 23, 2015 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. Link to comment Share on other sites More sharing options...
m_hutchins Posted April 24, 2015 Author Share Posted April 24, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 24, 2015 Share Posted April 24, 2015 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) Link to comment Share on other sites More sharing options...
m_hutchins Posted April 24, 2015 Author Share Posted April 24, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 24, 2015 Share Posted April 24, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 25, 2015 Share Posted April 25, 2015 Maybe conflict with theme jQuery use 'jQuery' instead of '$' Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now