Comments on: Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/ Thu, 29 Jul 2010 22:11:39 -0600 http://wordpress.org/?v=2.8 hourly 1 By: Glennyboy http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-1129 Glennyboy Wed, 21 Jul 2010 09:52:45 +0000 http://www.cybervaldez.com/?p=1130#comment-1129 Hi Would you mind demonstrating that please. Thanks Glennyboy Hi
Would you mind demonstrating that please.
Thanks
Glennyboy

]]> By: Cyber Valdez http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-1119 Cyber Valdez Tue, 20 Jul 2010 18:11:16 +0000 http://www.cybervaldez.com/?p=1130#comment-1119 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. 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 http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-1117 Glennyboy Tue, 20 Jul 2010 15:10:20 +0000 http://www.cybervaldez.com/?p=1130#comment-1117 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 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 http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-311 Cyber Valdez Thu, 15 Apr 2010 19:39:16 +0000 http://www.cybervaldez.com/?p=1130#comment-311 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. 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 http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-308 Glennyboy Thu, 15 Apr 2010 14:41:29 +0000 http://www.cybervaldez.com/?p=1130#comment-308 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:- <!--show active link in menu --> $(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:- <a href="/product//"></a> Any ideas my man? Glennyboy 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:-

<a href="/product//”>

Any ideas my man?
Glennyboy

]]> By: Glennyboy http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-279 Glennyboy Thu, 08 Apr 2010 20:33:22 +0000 http://www.cybervaldez.com/?p=1130#comment-279 Hi This looks excellent - I'll give it a whirl and let you know how I got on! Cheers Glennyboy Hi
This looks excellent – I’ll give it a whirl and let you know how I got on!
Cheers
Glennyboy

]]> By: Cyber Valdez http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-278 Cyber Valdez Thu, 08 Apr 2010 20:24:28 +0000 http://www.cybervaldez.com/?p=1130#comment-278 hi Glenny, you have 3 options option 1: <blockquote>var loc = window.location.toString().split("/") loc = loc[loc.length - 2] $('.CollapsiblePanelRepeat a[href="/'+loc+'/"]').addClass("selected");</blockquote> the format of your urls links should be (note the forward slash at the end.) <a href="/menu/" rel="nofollow"> option 2: same as above but no forward slash in your urls <blockquote>var loc = window.location.toString().split("/") loc = loc[loc.length - 2] $('.CollapsiblePanelRepeat a[href="/'+loc+'"]').addClass("selected");</blockquote> the format of your urls links should be (note the forward slash at the end.) <a href="/menu" rel="nofollow"> option 3: Exact addresses. <blockquote>var loc = window.location.toString() $('.CollapsiblePanelRepeat a[href="'+loc+'"]').addClass("selected"); </blockquote> the format of your urls links should be: <a href="http://www.allhomegrown.com/menu/" rel="nofollow"> <a href="http://www.allhomegrown.com/menu/menu.php" rel="nofollow"> 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 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.)
<a href=”/menu/” rel=”nofollow”>

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.)
<a href=”/menu” rel=”nofollow”>

option 3: Exact addresses.

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

the format of your urls links should be:
<a href=”http://www.allhomegrown.com/menu/” rel=”nofollow”>
<a href=”http://www.allhomegrown.com/menu/menu.php” rel=”nofollow”>

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

]]> By: Glennyboy http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-277 Glennyboy Thu, 08 Apr 2010 18:46:37 +0000 http://www.cybervaldez.com/?p=1130#comment-277 Hi Again Great so far, but any ideas how this will work after mod-rewrite anyone:- http://www.allhomegrown.com/menu/ Second link down 'Menu Mod Rewrite' should show as current acive in 'red'. Cheers Glennyboy Hi Again

Great so far, but any ideas how this will work after mod-rewrite anyone:-

http://www.allhomegrown.com/menu/

Second link down ‘Menu Mod Rewrite’ should show as current acive in ‘red’.

Cheers

Glennyboy

]]> By: Glennyboy http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-269 Glennyboy Wed, 07 Apr 2010 10:24:25 +0000 http://www.cybervaldez.com/?p=1130#comment-269 Hi Thanks for the quick input... not sure what you mean by 'alert(lo), but removing the leading '/' indeed did work. Ultimately though I need this to work under a mod-rewrite and I need to use absolute links with the leading /. How can I achieve this as per:- http://www.allhomegrown.com/menu/ With rewritten link as second line down and being <a href="/menu/" rel="nofollow">Menu Mod Rewrite</a> Any ideas? Glennyboy Hi
Thanks for the quick input… not sure what you mean by ‘alert(lo), but removing the leading ‘/’ indeed did work.

Ultimately though I need this to work under a mod-rewrite and I need to use absolute links with the leading /. How can I achieve this as per:-

http://www.allhomegrown.com/menu/

With rewritten link as second line down and being Menu Mod Rewrite

Any ideas?

Glennyboy

]]> By: Cyber Valdez http://www.cybervaldez.com/jquery-super-tip-automatically-highlight-the-linksmenu-of-the-current-page-with-1-line-of-code/2009/comment-page-1/#comment-267 Cyber Valdez Tue, 06 Apr 2010 16:24:52 +0000 http://www.cybervaldez.com/?p=1130#comment-267 Hi Glenn, try doing an alert(loc) at the end of the $(document).ready() script, your url's href must match the same text for it to work. You should be able to fix your problems by removing the forward slash in your links' hrefs. Hope that helps! Hi Glenn, try doing an alert(loc) at the end of the $(document).ready() script, your url’s href must match the same text for it to work. You should be able to fix your problems by removing the forward slash in your links’ hrefs. Hope that helps!

]]>