Welcome to WebmasterWorld Guest from 54.166.214.107

Forum Moderators: open

Message Too Old, No Replies

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)

Junior Member

5+ Year Member

joined:Sept 6, 2008
posts: 50
votes: 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 Sept 6, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts: 578
votes: 0


Have you tried pseudo classes on the A tag?

e.g.

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);
}
</script>

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

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


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">

or

<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>
</ul>

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 Sept 8, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 6, 2008
posts: 50
votes: 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 Sept 8, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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 Sept 8, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


@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 Sept 8, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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 Sept 9, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


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 Sept 9, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts:578
votes: 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.

@Fotiman:

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 Sept 9, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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 Sept 9, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts:578
votes: 0


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

:confused:

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

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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 Sept 9, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


@lavazza
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.

@g1smd

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 Sept 9, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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 Sept 9, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


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 Sept 9, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 6, 2008
posts: 50
votes: 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 Sept 30, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 6, 2008
posts:50
votes: 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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members