...

View Full Version : Parenting Problems...



samuurai
09-04-2008, 11:11 PM
Hi,

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

iDiv[i].parentNode.childNode.className.toLowerCase=='subtext';

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++)
{
if(iDiv[i].className.toLowerCase()=='inner')
{
alert(iDiv[i].parentNode.childNodes[0].length);
iDiv[i].onmouseover=function(){dojo.fadeOut({node:this,duration:200}).play();}
iDiv[i].onmouseout=function(){dojo.fadeIn({node:this,duration:200}).play();}
}
}
}


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

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

.......

iDiv[i].onmouseover=function(){dojo.fadeOut({node:getNextHTMLSibling(this),duration:200}).play();}
iDiv[i].onmouseout=function(){dojo.fadeIn({node:getNextHTMLSibling(this),duration:200}).play();}

samuurai
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum