PDA

View Full Version : Dynamic Link highlighting


RAMON
November 5th, 2005, 12:00 AM
I am beginning to learn Javascript and I was beginning to feel comfortable enough to begin to write my own scripts. The first thing that I tried to approach was a script that will dynamically highlight a link depending on the page you are on. The way it should work is this.

the script reads the page title

the script then finds the link with the id "n-'title'"

after it finds the id it then adds the class "active" to the link.

The style for the class active will then highlight the link for the page you are on. Pretty fun huh?

Well so far here is were I am with it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test1</title>
<!-- Javascript -->
<script type="text/javascript" language="javascript">
var pageTitle = document.getElementsByTagName ('title');
var getLink = 'n-' + pageTitle;
getLink.class = "active";

</script>

<!-- Page Styles -->
<style type="text/css" media="screen">
a {
padding: 50px;
}

a:hover {
background: black;
}

.active {
background: black;
}

</style>
</head>

<body>
<a href="test1.html" title="test 1" id="n-test1">Test 1</a>
<a href="test2.html" title="test 2" id="n-test2">Test 2</a>
</body>
</html>


As of right now I cannot get this to run. I thought I had the script written correctly but I am still very new so I do not have an idea of what could be wrong. Any ideas?
Ankou
November 5th, 2005, 02:13 AM
Yeah it could be pretty fun, but I just don't know if this is the right way to go about what you're doing. If you're looking to do something like this you can use a pure CSS method to handle the active link by setting your body tag on each page to have an ID related to the page. Then use CSS to set the active page...

<body id="test1">

#n-test1, #n-test2{ background: transparent; color: #00f; }
#test1 #n-test1{ background: #000; color: #fff; }
#test2 #n-test2{ background: #000; color: #fff; }



But looking at the JavaScript you have a space between the getElementsByTagName and the (. Also when you use getElementsByTagName I believe you're returned an array. So to find out what's being held in between the title tags you'd need to do something like so:

var pageTitle = document.getElementsByTagName('title')[0].innerHTML;

[0] is accessing the first item in the array (and the only item in this case since you only have one title per page).

innerHTML is getting what is actually between the <title> and </title> tags.

Your var getLink = 'n-' + pageTitle; line works fine, but to change the class you'll want to use className = "active". But you have to call that on the correct id. I didn't test this but something like document.getElementById(getLink).className = "active"; may work.

Play around with that and see what you can do, right now it's late and I'm too tired to test anything -- sorry.
RAMON
November 5th, 2005, 03:10 PM
My thinking behind using this type of method for highlighting a link is to use it with a cms. For example if you have a client that is using a website that will have pages added to it by them. By putting this javascript into the page template they can add pages and still have the active page link highlight. Otherwise you would have half the page that does what you want and another half of the page site that does not work right because the client does not know how to add the code.

Well here is what I am at right now.


<script type="text/javascript" language="javascript">
var pageTitle = document.getElementsByTagName('title')[0].innerHTML;
var getLink = 'n-' + pageTitle;
document.getElementById('getLink').className = "active";
</script>


I am getting this from the firefox javascript console

document.getElementById("getLink") has no properties.

Any thoughts?
senocular
November 5th, 2005, 03:25 PM
a couple of things:
1) you're using getLink incorrectly. In getElementById above, you are using 'getLink' which is looking for an element whose id is actually 'getLink' and not the value of the getLink variable. For that, you wouldnt have getLink in quotes.

document.getElementById(getLink)

2) Also, you'll want this script to run once the document has fully loaded. If you just let the script run once it loads in the header, chances are you wont be able to access the elements to which it refers to because they have yet to be loaded. Instead, you should put the code in a function and call that function in onload. This can be assigned in the body tag.

<body onload="yourFunction();">

... the other stuff you seemed to have fixed (innerHTML, className etc)