SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry An element's children's, children's, children

    Here is my xhtml:

    Code:
        <div id="menu">
          <ul id="nav">
    	  	<li class="tl"><a href="#">Home</a></li>
            <li class="tl"><a href="#">What We Do</a>
              <ul id="dd1">
                <li class="ddi"><a href="#">Software Development</a></li>
                <li class="ddi"><a href="#">Project Outsourcing</a></li>
              </ul>
            </li>
            <li class="tl"><a href="#">Our Projects</a>
              <ul id="dd2">
                <li class="ddi"><a href="#">Delivered Projects</a></li>
                <li class="ddi"><a href="#">Clients</a></li>
                <li class="ddi"><a href="#">Testimonials</a></li>
              </ul>
            </li>
            <li class="tl"><a href="#">EveryWare SD</a>
              <ul id="dd3">
                <li class="ddi"><a href="#">Fast Facts</a></li>
                <li class="ddi"><a href="#">The Team</a></li>
                <li class="ddi"><a href="#">Offices</a></li>
              </ul>
            </li>
            <li class="tl"><a href="#">Contact Us</a>
              <ul id="dd4">
                <li class="ddi"><a href="#">Get An Estimate</a></li>
                <li class="ddi"><a href="#">Contacts</a></li>
              </ul>
            </li>
          </ul>
        </div>
    I need to add a class to <li class="ddi"> so that I may use it in css.

    Here is my js code so far:

    Code:
    startList = function() 
    {
    	if (document.all&&document.getElementById) {  /*check if ie 5+*/
    		navRoot = document.getElementById("nav");
    		ddiRoot = document.getElementById("nav"); 
    		for (i=0; i<ddiRoot.childNodes.length; i++) {
    			cn = ddiRoot.childNodes[i]; /*This gets me to the first level "li" elements but I would like to go two levels deeper*/
    			if (cn.className=="ddi"){
    				cn.onmouseover=function()
    				{
    					this.className="on";
    				}
    				cn.onmouseout=function()
    				{
    					this.className=this.className.replace("on", "");
    				}
    			}
    		}
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() 
    				{
    					this.className+=" over";
    				}
    				node.onmouseout=function() 
    				{
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    </script>
    And here is the css line in question:

    Code:
    #nav li ul li:hover, #nav li ul li.on
    {
    	background-color:#003366;	
    }
    Any help would be great!!

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just use a getElementsByClassName function instead?

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't know that you could, that method is absent on MSDN. But then again, it is MS I'm talking about.

    Thanx.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh you mean write my own function getElementsByClassName... ok. looked it up and saw some good examples...

  5. #5
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With prototype it's fairly easy
    Code:
    document.getElementsByClassName("ddi", $("menu")).each(function(o) {
    	Event.observe(o, 'mouseover', function(e) {
    		Element.addClassName(o, "hover");
    	});
    	Event.observe(o, 'mouseout', function(e) {
    		Element.removeClassName(o, "hover");
    	});	
    })


Bookmarks

Posting Permissions

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