View Full Version : Parenting Problems...

09-04-2008, 11:11 PM

No, I'm not having trouble raising kids.... I'm having trouble with javascript's parentNode function.

Basically, I want to onMouseOver over the nodes with classname 'inner' and have the spans with class 'subtext' fade in and out.

I'm having trouble targeting them using


For some reason, when I do alert(iDiv[i].parentNode.id), it works fine, showing me Windows, Linux etc etc, but when I do alert(iDiv[i].parentNode.childNodes.length) it says 7, suggesting the seven nodes within 'header-menu'. It's gone one step too far up. How can I get it to just look at the children of 'Windows', 'Linux' etc etc

Here's my JS

for(var i=0; i < iDiv.length;i++)

Here's my HTML:

<div id="header-menu">
<div class="headLink" id="Windows">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Windows</div>
<span class="subtext">Windows OS Tutorials</span> </div>
<div class="headLink" id="Linux">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Linux</div>
<span class="subtext">Linux OS Tutorials</span> </div>
<div class="headLink" id="Webdev">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Web Dev</div>
<span class="subtext">Web Dev Tutorials</span> </div>
<div class="headLink" id="Programming">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Programming</div>
<span class="subtext">Programming Tutorials</span> </div>
<div class="headLink" id="Graphics">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Graphics</div>
<span class="subtext">Graphics/CGI Tutorials</span> </div>
<div class="headLink" id="Other">
<div class="fisheyeTarget" style="height: 1px;"></div>
<div class="inner">Other</div>
<span class="subtext">Other Tutorials</span> </div>
<div id="contribute">
<button dojoType="dijit.form.Button" id="submittutorial">Contribute</button>

Arty Effem
09-05-2008, 02:30 AM
It looks as though you're trying to act upon the the next sibling of the hovered element, in which case ideally you could simply use

dojo.fadeIn({node:this.nextSibling,duration:200})However as you have discovered, Mozilla treats whitespace between tags as a text node, so you need to get a reference to the next HTML element.
This may do it:

function getNextHTMLSibling( elem )
var sib=elem;

while((sib=sib.nextSibling) && sib.nodeType==3)

return sib;



09-09-2008, 11:50 PM
That code worked perfectly ! I still don't really understand why parentNode.childNodes doesn't work.. seems like broken functionality to me (at least in firefox).

Sorry it took so long to respond.. had a busy week :)