Comments on: Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code

By: Fred Riley

Fred Riley — Mon, 23 Aug 2010 12:11:53 +0000

Thanks, that’s a really handy and very simple bit of code, which works a treat

By: Cyber Valdez

Cyber Valdez — Fri, 13 Aug 2010 19:50:15 +0000

Hi Rose, try something like: $("#navigation li a[href=\""+loc+"\"]").addClass("selected").parent().addClass("expand");

(just add as many .parent() you need until you get to the right one) $("#navigation li a[href=\""+loc+"\"]").addClass("selected").parent().parent().addClass("expand");

Hope this helps!

By: Rose

Rose — Fri, 13 Aug 2010 18:09:59 +0000

Your script was just what I needed! Thank you.

I do have a few questions though I hope you can help me with. I'm just learning jquery and can't seem to figure out how to add to this script so that line items with ul submenus that are active are automatically expanded on my accordion. I have a class called "expand" that I would like added through jquery.

Here's an example of my current nav structure:

Category 1 Category 2

Subcategory 1 Sub 2

If an item in ul.submenu is active, I'd like the parent li of the ul to automatically have the "expand" class added to it. Any suggestions you have would be great. Thanks.

By: Glennyboy

Glennyboy — Wed, 21 Jul 2010 09:52:45 +0000

Hi Would you mind demonstrating that please. Thanks Glennyboy

By: Cyber Valdez

Cyber Valdez — Tue, 20 Jul 2010 18:11:16 +0000

Hmm the technique should also work with SSI+Rewrites setup, as for your script, you may want to use lastIndexOf(‘/’) to omit any extra slashes at the end though.

By: Glennyboy

Glennyboy — Tue, 20 Jul 2010 15:10:20 +0000

Hey, Long time

Unfortunately I never could get the concept above working on my configuration (ssi + mod-rewrite).

I have found something in the JQuery docs which tries to get the same result:-

$(function(){ var path = location.pathname.substring(1); if ( path ) $('#nav li a[href$="' + path + '"]').attr('class', 'selected'); });

Unlike your script the problem with this is that it doesn't strip anything out and takes a very literal link strategy.

So on my current development site:-

http://ps.slickmedia.co.uk/

I get nothing on the straight url, but if I visit:-

http://ps.slickmedia.co.uk//

Then all my nav items get the 'selected class' as they all start and end with a '/' (e.g. '/', /'about_us/, '/contact_us/' etc) as per your option 1 above. So currently this script is just searching for a '/' and then applying the class.

Obviously I don't want that and I'm thinking that if we can combine this script with yours we may have a solution to my problem of it not applying. And that's where I'm stuck. Any ideas?

Glennyboy

By: Cyber Valdez

Cyber Valdez — Thu, 15 Apr 2010 19:39:16 +0000

try replacing loc = loc[loc.length - 2] to loc = loc[loc.length - 2] + loc[loc.length - 1] you should try doing an alert(loc) after that as well so you can see what’s wrong with your url. your url should have the same address as the alerted string.

By: Glennyboy

Glennyboy — Thu, 15 Apr 2010 14:41:29 +0000

Hi So far so good... almost!!! I have this working on my test page here:-http://www.allhomegrown.com/menu/ ... but I can't get it working on my actual menu here:-http://www.allhomegrown.com/product/1/ I think this may be because I'm going a further child level down in the url and perhaps the code needs to reflect this as '/product/id/' I am using your option 1 and this is my code:-

$(document).ready(function() { var loc = window.location.toString().split("/") loc = loc[loc.length - 2] $('.CollapsiblePanelRepeat a[href="/'+loc+'/"]').addClass("active");

});

and this is my link:-

Any ideas my man? Glennyboy

By: Glennyboy

Glennyboy — Thu, 08 Apr 2010 20:33:22 +0000

Hi This looks excellent – I’ll give it a whirl and let you know how I got on! Cheers Glennyboy

By: Cyber Valdez

Cyber Valdez — Thu, 08 Apr 2010 20:24:28 +0000

hi Glenny, you have 3 options option 1:

var loc = window.location.toString().split("/") loc = loc[loc.length - 2] $('.CollapsiblePanelRepeat a[href="/'+loc+'/"]').addClass("selected");

the format of your urls links should be (note the forward slash at the end.)

option 2: same as above but no forward slash in your urls

var loc = window.location.toString().split("/") loc = loc[loc.length - 2] $('.CollapsiblePanelRepeat a[href="/'+loc+'"]').addClass("selected");

the format of your urls links should be (note the forward slash at the end.)

option 3: Exact addresses.

var loc = window.location.toString() $('.CollapsiblePanelRepeat a[href="'+loc+'"]').addClass("selected");

the format of your urls links should be:

p.s: if you plan on copying the codes above, use this link instead. This blog theme seems to be converting the apostrophes and quotes so copy pasting the codes from this blog won't work. Here's the raw version: http://pastebin.com/hBywpeBE