using document.title to identify current page

[njlyell]

I'm designing a website and I would like to add a certain class to a navigation element based on the document title. I currently have the following javascript. The nav elements have separate ids (the About Us nav element has the id="about" and so on)


<code>
window.onload=function(){
var docTitle = document.title;
var about = document.getElementById("about");
var advising = document.getElementById("advising")


if (docTitle = "About Us") {
about.setAttribute("class", "current");
about.setAttribute("className", "current"); // for IE which does not recognize "class"
return;
}
else {
about.setAttribute("class", "top_link");
about.setAttribute("className", "top_link"); // for IE which does not recognize "class"
}


if (docTitle = "Career Advising") {
advising.setAttribute("class", "current");
advising.setAttribute("className", "current"); // for IE which does not recognize "class"
return;
}
else {
advising.setAttribute("class", "top_link");
advising.setAttribute("className", "top_link"); // for IE which does not recognize "class"
}



}
</code>

The class change works
The problem seems to be that the if statement is true whether or not the document.title ="about" or anything else, (if I remove the return, both about us and advising elements have their class changed.

Thank you in advance

[Tcobb]

I think you're failing to get the text that is contained with the title tags, which I assume is what you are really after. Try:

var v = document.getElementsByTagName('title');
var x =v[0].innerHTML;
alert(x); //this is the text within the TITLE tags

This does ASSUME that there is only one set of TITLE tags in your HTML document. (don't laugh, I've seen stranger things before)

[coothead]

Hi there njlyell,

also note that your if statements are incorrect.

They should be like this...

if (docTitle =="About Us") {

coothead

[njlyell]

Thanks both of you, it worked.

[coothead]

No problem, you're very welcome.

[thraddash]

Just specifying the className attribute should work for all major browsers:

//about.setAttribute("class", "current");
about.setAttribute("className", "current");

Or even just:

about.className = 'current';

[Kor]

Just specifying the className attribute should work for all major browsers:

//about.setAttribute("class", "current");
about.setAttribute("className", "current");

No, this won't work in all the browsers.

Or even just:

about.className = 'current';

Yes. This DOM level 0 syntax is crossbrowser.

[Troy III]

Thank you in advance

I might be the newest member at this moment.
So, -Greetings to every one!

I do JavaScript since the summer of 1996, and I think I've learned some good coding practices during these years, that I'd like to share.

To the topic:
-Assuming that, "About Us" is a different page from the "Advising..." one, and that your Top Links are using "top_link" class as default , -the only thing you need to do would be to accent the current link one leaving others undisturbed.

Also, (assuming that) your naming principle is as precise as seen here, I propose you try something like this (following script and approach).

window.onload=function(){
     var docTitle = document.title.split(" ")[0];
     var current = document.getElementById(docTitle);
          current.className="current"
          }

Regards, to all.