SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    help debug please

    HTML Code:
    ieHover = function() {
    	var ele = document.getElementById("nav").getElementsByTagName("li");
    	for (i in ele) {
    		var child = ele[i].getElementsByTagName('a');
    		for (j in child)
    		{
    			child[j].onclick = function() {
    				window.location = this;
    			}
    		}
    		
    		ele[i].onmouseover=function() {
    			this.className +=" iehover bghover";
    		}
    		ele[i].onmouseout=function() {
    			this.className = this.className.replace(new RegExp("iehover bghover"), "");
    		}
    	}
    }
    window.onload = function() { ieHover(); }
    ele[i].getElementsByTagName is not a function is the error message. I'm guessing the code is incorrect because ele[i] is not of the right object, so I need to use a different method to find all of ele[i]'s child anchors, any help?

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,284
    Mentioned
    181 Post(s)
    Tagged
    4 Thread(s)
    You have confused the syntax in the foreach construct.
    for(i in ele) will assign each array element in 'ele' the individual variable of 'i', allowing you to operate on it.
    The construct ele[i] is invalid. All you need is to use 'i'. It represents THE CURRENT ele ELEMENT.
    Is that confusing?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The for...in statement is used to retrieve properties from objects.

    The collection returned by getElementsByTagName is an object, and the first property returned by for...in is "length". So don't use for...in to go through and pull out elements. Use:

    Code:
    var lis = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i < lis.length; i++) {
      var li = lis[i]; // the current <li>
      var ancs = li.getElementsByTagName("a");
    
      for (var j=0; j < ancs.length; j++) {
        var anc = ancs[j]; // the current <a>
        // do stuff with anc
      }
    
      // do stuff with li
    }
    As for your event handler for the <a> tags...
    What is it you are trying to do? Make the browser load the content of the href? You don't need any javascript for that, it's what the <a> tag does.

  4. #4
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    The for...in statement is used to retrieve properties from objects.

    The collection returned by getElementsByTagName is an object, and the first property returned by for...in is "length". So don't use for...in to go through and pull out elements. Use:

    Code:
    var lis = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i < lis.length; i++) {
      var li = lis[i]; // the current <li>
      var ancs = li.getElementsByTagName("a");
    
      for (var j=0; j < ancs.length; j++) {
        var anc = ancs[j]; // the current <a>
        // do stuff with anc
      }
    
      // do stuff with li
    }
    As for your event handler for the <a> tags...
    What is it you are trying to do? Make the browser load the content of the href? You don't need any javascript for that, it's what the <a> tag does.
    Well I was actually trying to make it so that when you click on an <li> it would load like as if the <a> inside was clicked. I can't set a defined width to <a> and I can't seem to get anchor links to fill up the entire <li> block level with display: block on ie6, so i figured I could solve it by using javascript but I ran into this problem.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, ok, well I guess you can do that. You don't need a handler for the <a> elements though.

    Code:
    var lis = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i < lis.length; i++) {
      var li = lis[i]; // the current <li>
      li.onclick = function () {
        var myLink = this.getElementsByTagName("a")[0]; // get the first <a> tag in this LI
        window.location.href = myLink.href;
      }
      
      // other event handlers
    }

  6. #6
    SitePoint Zealot
    Join Date
    May 2007
    Location
    West Midlands, UK
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried this? I havn't tested it across browsers, my XP box is off at the moment, im on OSX. I guess you have probably tried it. Its a very crude example, but you get the picture.

    Code:
    		ul {list-style: none; overflow: hidden;}
    		
    		li {float: left; background: red;}
    		
    		li a {color: white; display: block; padding: 1em;}
    
    // -------------------------------------------------------------------------------
    	
    	<ul>
    		<li><a href="#">Link One</a></li>
    		<li><a href="#">Link Two</a></li>
    		<li><a href="#">Link Three</a></li>
    	</ul>

  7. #7
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Oh, ok, well I guess you can do that. You don't need a handler for the <a> elements though.

    Code:
    var lis = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i < lis.length; i++) {
      var li = lis[i]; // the current <li>
      li.onclick = function () {
        var myLink = this.getElementsByTagName("a")[0]; // get the first <a> tag in this LI
        window.location.href = myLink.href;
      }
      
      // other event handlers
    }
    This always gets the parent nav's link, it's placing the onclick handler for all the subnav as its parent. What am I missing?

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This example works ok
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    ieHover = function() {
    	var lis = document.getElementById("nav").getElementsByTagName("li");
    	for (var i=0; i < lis.length; i++) {
    	  var li = lis[i]; // the current <li>
    	  li.onclick = function () {
    	    var myLink = this.getElementsByTagName("a")[0]; // get the first <a> tag in this LI
    	    window.location.href = myLink.href;
    	  }
    	  
    	  // other event handlers
    	}
    }
    window.onload = function() { ieHover(); }
    </script>
    </head>
    <body>
    	<ul id="nav">
    		<li><a href="http://www.google.com">google</a></li>
    		<li><a href="http://www.sitepoint.com">sitepoint</a></li>
    		<li><a href="http://www.yahoo.com">yahoo</a></li>
    	</ul>
    </body>
    </html>

  9. #9
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    The code was given for a multi-level navigation it looks like this:

    HTML Code:
    <ul>
    	<li><a>
    		<ul>
    			<li><a>
    				<ul>
    					<li><a></li>
    					<li><a></li>
    					<li><a></li>
    				</ul>
    			</li>
    			<li><a></li>
    			<li><a></li>
    		</ul>
    	</li>
    	<li><a>
    	</li>
    </ul>

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, looks like the event is bubbling/propagating up to the parent elements.

    Try this:
    Code:
    ieHover = function() {
    	var lis = document.getElementById("nav").getElementsByTagName("li");
    	for (var i=0; i < lis.length; i++) {
    	  var li = lis[i]; // the current <li>
    	  li.onclick = function (e) {
    	  	e = e ? e : window.event;
    	    var myLink = this.getElementsByTagName("a")[0]; // get the first <a> tag in this LI
    	    if (e.stopPropagation) {
    	    	e.stopPropagation();
    	    } else {
    				e.cancelBubble = true;
    	    }
    	    window.location.href = myLink.href;
    
    	  }
    	  
    	  // other event handlers
    	}
    }

  11. #11
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Now problem is almost solved..

    This works great in Firefox but only partially works in IE6. It is working for the 3 tier menu, but the other menus are 1/2 tier, and for those its not working. Any clue why?

    So I looked into what you did, and am wondering if I am right..

    So when its looping through the li elements, it sticks an onclick handler on all them from the oldest to the youngest, and then goes backwards from the youngest to the oldest? So you're stopping the second half?


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
  •