homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Retrieving/using current file's name
Using the name of the current file to determine style

 12:09 am on Sep 6, 2008 (gmt 0)

I'm trying to figure out how to retrieve the name of the current file, then use it to dynamically change some CSS in my navigation bar. For example, if my user's on the homepage (index.html), I need the link to the homepage in the navigation bar to be highlighted, indicating which page they're currently viewing. I know how to change the CSS, but I need the current file's name to use in my if statements. Could someone please help me out? I'm pretty new to Javascript. Thanks!



 2:45 am on Sep 6, 2008 (gmt 0)

Have you tried pseudo classes on the A tag?


a:link {color:#f00}
a:visited {color:#00f}
a:hover {color:#0ff}
a:active {color:#0f0}

I read somewhere that they need to be declared in that order; L, V, H, A
(a mnemonic: LoVe HAte)

If you are adamant that javascript must be used, then try this:

<script type="text/javascript">
window.onload = getMyWindowDotLocationStuff();

function getMyWindowDotLocationStuff() {
var myHost = window.location.host;
var myHref = window.location.href;
var myPathName = window.location.pathname;
var myFileName=window.location.href.substring(window.location.href.lastIndexOf("/")+1,window.location.href.length);
alert('myHost is:\n' + myHost + '\n\n myHref is:\n ' + myHref + '\n\n myPathName is:\n ' + myPathName + '\n\n myFileName is:\n ' + myFileName);


 1:14 pm on Sep 8, 2008 (gmt 0)

Welcome to WebmasterWorld. With regards to your question, have you considered giving each HTML page a unique id on the body? For example:

<body id="home">


<body id="aboutus">

Then give each link in your navigation a unique id as well:

<ul id="nav">
<li><a id="homeLink" href="index.html">Home</a></li>
<li><a id="aboutusLink" href="about.html">About Us</a></li>

Then just define your styles as follows:
#nav a { 
background: #eee;
color: #000;
#home #homeLink,
#aboutus #aboutusLink {
background: #000;
color: #fff;

This way, you're not relying on JavaScript to control the "Presentation". It's all done with CSS which is where it should be.


 3:48 pm on Sep 8, 2008 (gmt 0)

@Lavazza - I'm very familiar with pseudo classes in CSS, but there isn't currently one that would do what I need it to do. I was going to give your script a try, but I just hadn't had the chance to work on this project again since my post and I think Fotiman's suggestion will be a lot easier for me to implement. Thanks for your input though!

@Fotiman - I try to keep my navigation code in an external text file imported using the script tag to make site-wide editing easier later on, so I was thinking that I would need to have external Javascript change the background color of the current navigation page. I hadn't even thought about using an id for the whole page. That looks like it should work perfectly, but I probably won't have time to work on it today. I'll let you know how it goes as I work on this project throughout the week. Thanks!


 6:27 pm on Sep 8, 2008 (gmt 0)

When building the page for display I use PHP to dynamically add class="here" on the link that points to the current page within the navigation bar. In that case, there's no need for any JavaScript to run on the client browser.

The CSS is then much simpler:

div.nav ul li a { ... }

div.nav ul li a.here { ... }


 8:36 pm on Sep 8, 2008 (gmt 0)

@g1smd, note that in my example there is no JavaScript required either. Your method will work perfectly well, but adds the requirement of some server side language and logic to determine which link gets the 'here' class. Nothing wrong with that, it's just another way to skin a cat. :-)


 9:45 pm on Sep 8, 2008 (gmt 0)

Does your method require one line of code in the CSS file for every page of the site, or at least for every section of the site?


 3:58 am on Sep 9, 2008 (gmt 0)

Yes, exactly. One line for each page/section (ie - an item in your navigation). For example, if I wanted to add a "Products" page, then I would modify my original example like this:

#home #homeLink,
#aboutus #aboutusLink,
#products #productsLink {
background: #000;
color: #fff;


 4:59 am on Sep 9, 2008 (gmt 0)

For example, if my user's on the homepage (index.html), I need the link to the homepage in the navigation bar to be highlighted, indicating which page they're currently viewing.


Maybe this is just a bad month for me to give up caffeine, but I don't see how your approach works, to dynamically highlight the current (active) page's link...


 8:03 am on Sep 9, 2008 (gmt 0)

Only when the ID on the <html> tag matches the ID on the link does the style visually change.

That is, a link to "about" on the about page matches #about #aboutLink but when on the "contacts" page it would not match (as that link would match #contact #aboutLink instead).

While this method would work, it is only suitable for sites up to a few dozen pages, as you need a line of CSS for each page combination. Beyond a few pages that isn't easy to maintain.


 8:43 am on Sep 9, 2008 (gmt 0)

So... it's not dynamic at all then?



 8:56 am on Sep 9, 2008 (gmt 0)

No. It was my suggestion that was dynamic, using PHP to add class="here" to the link for the current page.


 1:22 pm on Sep 9, 2008 (gmt 0)

As g1smd pointed out, my suggestion is not "dynamic" in the sense that if you add another page/section to your site you will still need to add the logic that specifies how the link gets highlighted (via a line of CSS). It works and doesn't rely on a particular server side language.

Beyond a few pages that isn't easy to maintain.

Depends on what you consider a few. If you have so many pages that it gets confusing then you probably shouldn't be displaying all of those links in a navigation bar. But for most small - medium size sites this method works.


 1:37 pm on Sep 9, 2008 (gmt 0)

I would be thinking about automation beyond 20 to 25 pages, and would have it done for anything over 50 pages.


 1:51 pm on Sep 9, 2008 (gmt 0)

I agree. Over 20 would start to become difficult to maintain. But I also wouldn't be using a single-level navigation bar to display that many links, in which case the benefit of highlighting what page you were on would not be as beneficial (depends on how you have your navigation setup I suppose). :-)


 2:21 pm on Sep 9, 2008 (gmt 0)

In case you're curious, this site I'm building will have fewer than 10 pages, so the single-level nav is fine.


 2:31 am on Sep 30, 2008 (gmt 0)

@Fotiman - I had to put this project on the backburner for a couple weeks, but I just now tried your suggestion about using the body/nav IDs and it seems to be working perfectly. Thanks!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved