Change Link Color Via Javascript
Im playing around with a pure HTML site recently (no server side tech at all) and OMG how akward is the simple stuff. To make my life a little more easier I have been using Dreamweaver's templates which make managing layouts easier especially when you have forgotten a navigation link.
One thing I have been trying to do is change the colour of a selected navigation link. i.e. The navigation links are all blue except for the link to the section you are currently in which is white. I was about to do this with DWMX templates conditional statements, which can get a little messy, and awkard when putting them inline to change the href class atrribute. Doing this with CFMX or PHP is simple and thats what I wanted.
Comments
I would go one step further and use JS to set a class name rather than actually modify the styling. This way you keep presentation in the CSS files rather than in the JS/HTML.
An easy, html only solution is to just give each of your pages' body tag an id attribute. as an quick example (without adressing visited links, etc):
<html>
<head>
<style type="text/css">
a {
color: blue;
}
body#home-page a#home-link,
body#products-page a#products-link,
body#projects-page a#projects-link,
body#about-page a#about-link,
body#contact-page a#contact-link {
color: white;
}
</style>
</head>
<body id="products-page">
<a href="index.htm" id="home-link">Home</a>
<a href="products.htm" id="products-link">Products</a>
<a href="projects.htm" id="projects-link">Projects</a>
<a href="about_us" id="about_us-link">About Us</a>
<a href="contact_us.htm" id="contact_us-link">Contact Us</a>
</body>
</html>
<html>
<head>
<style type="text/css">
a {
color: blue;
}
body#home-page a#home-link,
body#products-page a#products-link,
body#projects-page a#projects-link,
body#about-page a#about-link,
body#contact-page a#contact-link {
color: white;
}
</style>
</head>
<body id="products-page">
<a href="index.htm" id="home-link">Home</a>
<a href="products.htm" id="products-link">Products</a>
<a href="projects.htm" id="projects-link">Projects</a>
<a href="about_us" id="about_us-link">About Us</a>
<a href="contact_us.htm" id="contact_us-link">Contact Us</a>
</body>
</html>
well, ignoring my copy and paste errors with the id names ;)
Andy,
This is very close to something I've been trying to execute on my search engine. I want all links that contain "AS BID" in the URL to be green, and links containing "AS BUILT" in the URL to be blue. Is it possible with a tweak of your code? It seems so close.
Thanks,
Zadok
This is very close to something I've been trying to execute on my search engine. I want all links that contain "AS BID" in the URL to be green, and links containing "AS BUILT" in the URL to be blue. Is it possible with a tweak of your code? It seems so close.
Thanks,
Zadok
Have you tried a regEx search of the sting? that should do it
No, I haven't used such a command. How would that look?
@Zadok, I'll see if I can put something together. Though it would probably be quicker for you to check out http://www.javascriptkit.com/jsref/regexp.shtml as a starting point.
The script that reads the page name without it having to be the FQDN is sweet. Thanks. Although funnily i had to swap the (.)
for (,) for it to show up as foo.asp and not foo,asp. Anyhow,
Used this to write header include file with a css menu. This reads the name of the page, sees which of the <li> item links it matches
and then changes the background colour using the corresponding id to make sure the current option worked even though the whole
thing is an include.
Cheers again... I credited you in my script comment
for (,) for it to show up as foo.asp and not foo,asp. Anyhow,
Used this to write header include file with a css menu. This reads the name of the page, sees which of the <li> item links it matches
and then changes the background colour using the corresponding id to make sure the current option worked even though the whole
thing is an include.
Cheers again... I credited you in my script comment
