Forum Moderators: open
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>
<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.
@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!
The CSS is then much simpler:
div.nav ul li a { ... }
div.nav ul li a.here { ... }
#home #homeLink,
#aboutus #aboutusLink,
#products #productsLink {
background: #000;
color: #fff;
}
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...
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.
:confused:
@g1smd
Beyond a few pages that isn't easy to maintain.
