SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: help debug please
-
Oct 23, 2007, 17:33 #1
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(); }
-
Oct 23, 2007, 19:04 #2
- Join Date
- May 2006
- Location
- Central Florida
- Posts
- 2,345
- Mentioned
- 192 Post(s)
- Tagged
- 5 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)
►Git is for EVERYONE
►Literally, the best app for readers.
►Make Your P@ssw0rd Secure
►Leveraging SubDomains
-
Oct 23, 2007, 21:28 #3
- 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 }
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.
-
Oct 23, 2007, 21:43 #4
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.
-
Oct 24, 2007, 00:37 #5
- 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 }
-
Oct 24, 2007, 01:05 #6
- 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>
-
Oct 27, 2007, 22:42 #7
-
Oct 29, 2007, 05:10 #8
- 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>
-
Oct 29, 2007, 08:39 #9
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>
-
Oct 29, 2007, 13:59 #10
- 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 } }
-
Oct 29, 2007, 21:57 #11
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