Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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>
    Last edited by Bosko; 09-28-2002 at 11:18 PM.

  • #5
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)){

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •