Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts

    Parenting Problems...

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



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

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    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
    Code:
    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:
    Code:
    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();}

  • Users who have thanked Arty Effem for this post:

    samuurai (09-09-2008)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •