Helpful Information
 
 
Category: DOM and JSON scripting
Very basic setAttribute() problem?

OK here's what I have:

<script>
document.getElementById("abc").setAttribute("class","grayout")
</script>

<a id="abc" class="normal" href="index.html">test</a>

This works as it is. The problem is when the link is nested into a table like this:

<table ><tr><td>
<a id="abc" class="normal" href="index.html">test</a>
</td></tr></table>

Now the class will remain "normal" and NOT change to "grayout". I have also tried to put the script in the same cell, and that hasn't helped.

Application
I need to change the class of one link in the menubar whenever the user enters that specific page. For ex: When you go to INDEX it will make the link to INDEX gray. This way you know where you are in the site. If there is a better way - so I don't have to change the script for each page to point to a new link - please let me know.

I hope I'm not asking a ignorant/stupid question but I've read through the DOM tutorials at wsabstract.com and I couldn't find anything on a problem with tables.

Thanks in advance,
Filip

What you need is to change the ClassName of the element:
document.getElementById("abc").className="grayout";

You should make the menu script check if the link points to the current page,and if it does change the class.Or you could use some serverside language.

Great! Thanks for the reply, I'll try that.

I don't really have a menu script. I use components. The menu is basically a column with many rows. Plus, I need to highlight the section as well. I think I will result to just changing 2 variables per page manually.

Thanks again for he fast response.

I quickly made this little simple script,you should ofcourse modify it to get only the links in the menu,by replacing the "document.getElementsByTagName("a")" with "menu.getElementsByTagName("a");" (where menu is a reference to the menu containing the links) .It changes the className of every link that points to the current page:


<script>
var links = document.getElementsByTagName("a");
var currentpage=document.location;
var currentlink;

for (var i = 0; i < links.length; i++) {

currentlink=links[i].href;

if(links[i].href==currentpage || currentlink.substring(currentlink.lastIndexOf("/")+1,currentlink.length)==currentpage.substring(currentpage.lastIndexOf("/")+1,currentpage.length)){
links[i].className="grayout";
}

}
</script>

Wow! Thanks a lot! I had problems using the basic:

<script>
document.getElementById("abc").className="grayout";
</script>

It wouldn't do anything. The debugger said that the argument was null, but the id is defined, as is the class for the target link.

As for your script:

What I think I understand: it compiles a list of all the links on the page and then searches through the array one by one comparing the 'href' to the current document location. Actualy to be more specific, it just uses the truncuated location (whats after the /). If href and the current file location are the same, then it changes its class.

I don't see where I should modify it, other than the class name. Sorry, my knowledge of JS isn't what it should be. As it stands, the script gives me an error (obj doesn't support this property/method) on object 2 of:

if(links[i].href==currentpage || currentlink.substring(currentlink.lastIndexOf("/")+1,currentlink.length)==currentpage.substring(currentpage.lastIndexOf("/")+1,currentpage.length)){

Changing the className will only work in Mozilla and IE.

The script works fine with Mozilla,and should work with IE too,so what browser are you using?

IE6

I went online to double check the syntax and it looks ok to me. I spent the better part of yesterday playing around with it and I can't seem to get it to do anything.

As a workaround, I though of removing the "href" attribute, which would also force it to change classes to "menubar" from "menubar a". This works ok outside a table but once I put it in the actual menu bar it just sits there - doesn't do anything.

[edit]: It shouldn't matter if I use the row of the table as my id/item that I'm changing, vs the actual link, correct?










privacy (GDPR)