help debug please

[wonshikee]

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?

[ParkinT]

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?

[jimfraser]

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:

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.

[wonshikee]

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:

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.

[jimfraser]

Oh, ok, well I guess you can do that. You don't need a handler for the <a> elements though.

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
}

[cascadingstylez]

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.

		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>

[wonshikee]

Oh, ok, well I guess you can do that. You don't need a handler for the <a> elements though.

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?

[jimfraser]

This example works ok

<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>

[wonshikee]

The code was given for a multi-level navigation it looks like this:

<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>

[jimfraser]

OK, looks like the event is bubbling/propagating up to the parent elements.

Try this:

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
	}
}

[wonshikee]

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?