/    Sign up×
Community /Pin to ProfileBookmark

current link menu marker

Copy linkTweet thisAlerts:
May 16.2010

When someone is on a page, I want the style of that current menu link to be obvious to the user. Change color, make bold, etc.

I found this to get the current page…

[CODE]<script type=”text/javascript”>
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf(‘/’) + 1);
</script>[/CODE]

… but how do I use this to change the class of the link that matches the current page?

TIA

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@webguy262authorMay 16.2010 — You r suggestion obviously will work, but I'm try to do this w/o having to make code changes to every page.

Basically, it's:

if var current_page == var link, style.link = different_css_style

I'm trying to do this with JS (I'm not a JS expert by any means) so I do not have to edit each page, and each line in the menu.
Copy linkTweet thisAlerts:
@FangMay 17.2010 — This basicallywindow.onload=function() {
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var aObj=document.getElementsByTagName('a');
var i=aObj.length;
while(i--) {
if(aObj[i].href.indexOf(sPage )!=-1) {aObj[i].className = 'current';}
}
};
Copy linkTweet thisAlerts:
@webguy262authorMay 17.2010 — Thanks.

I added the script to the header, and created a .current class, but I'm sure I'm missing something.

Can you take a look?

Excuse the music... client insists on it!

http://www.theinnatbowmanshill.com/NEW_SITE/
Copy linkTweet thisAlerts:
@FangMay 17.2010 — validate.js and menu.js are html documents ???

The body onload must be removed.

Add that function here:&lt;script type="text/javascript"&gt;
window.onload=function() {
[COLOR="Blue"]MM_preloadImages('../images/1_on.jpg','../images/2_on.jpg','../images/3_on.jpg','../images/4_on.jpg','../images/5_on.jpg','../images/6_on.jpg');
[/COLOR]var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var aObj=document.getElementsByTagName('a');
var i=aObj.length;
while(i--) {
if(aObj[i].href.indexOf(sPage )!=-1) {aObj[i].className = 'current';}
}
};
&lt;/script&gt;
Copy linkTweet thisAlerts:
@webguy262authorMay 17.2010 — BTW, those js files are no longer needed in the new site so they're coming up page not found hence the html.

Your script is working, thanks!

Two questions...

1) The style of the current link is changing after the link loads. Is it possible to get it to paint with the current style the first time?

2) the Gallery page works with a get parameter so all the sublinks take the current style. Is there a way to account for the 'dir' parameter so only one link paints current?

Thanks again!
Copy linkTweet thisAlerts:
@FangMay 17.2010 — 1) Use the solution given in the link (css) or do this server-side. It may be possible to get it to show slightly quicker by running the script at the top of the jQuery onload.

2) window.onload=function() {
MM_preloadImages('../images/1_on.jpg','../images/2_on.jpg','../images/3_on.jpg','../images/4_on.jpg','../images/5_on.jpg','../images/6_on.jpg');
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var aObj=document.getElementsByTagName('a');
for(var i=0; i&lt;aObj.length; i++) {
if(aObj[i].href.indexOf(sPage )!=-1) {aObj[i].className = 'current'; break;}
}
};
Copy linkTweet thisAlerts:
@webguy262authorMay 17.2010 — I'll try changing the load order.

Thanks again. You saved me writing lots of clumsy php code!
Copy linkTweet thisAlerts:
@FangMay 17.2010 — You saved me writing lots of clumsy php code[/QUOTE]It's a lot easier doing this with php.
×

Success!

Help @webguy262 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...