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

    How can I turn this into one function?

    Hi,

    Is it possible to change this code so I just have one function for the onMouseOver and onMouseOut calls?

    I know it's a basic question, but i'm a bit of a n00b with JS if I'm honest.

    Thanks in advance!

    Code:
    <div class="headLink" id="Windows">
    				<div class="fisheyeTarget"></div>
    				<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Windows</div>
    				
    				<span class="subtext">Windows OS Tutorials</span>
    
                </div>
    			<div class="headLink" id="Linux">
    				<div class="fisheyeTarget"></div>
    				<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Linux</div>
    				<span class="subtext">Linux OS Tutorials</span>
                </div>
    			<div class="headLink" id="Webdev">
    				<div class="fisheyeTarget"></div>
    				<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Web Dev</div>
    				<span class="subtext">Web Dev Tutorials</span>
                </div>
                <div class="headLink" id="Programming">
    				<div class="fisheyeTarget"></div>
    				<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Programming</div>
    				<span class="subtext">Programming Tutorials</span>
                </div>
    Last edited by samuurai; 09-03-2008 at 10:15 PM.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I haven't worked with Dojo yet, but maybe worth a try on removing all the inline events in your markup and use this script instead:
    Code:
    <script type="text/javascript">
    window.onload=function(){
    for(var i=0,iDiv=document.getElementsByTagName('div');i++)
    	{
    	if(iDiv[i].className.toLowerCase()=='inner')
    		{
    		iDiv[i].onmouseover=function(){dojo.fadeOut({node:this,duration:200}).play();}
    		iDiv[i].onmouseout=function(){dojo.fadeIn({node:this,duration:200}).play();}
    		}
    	}
    }
    </script>
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    samuurai (09-04-2008)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    Woohoo! Thanks for that code.

    I had to change it a little bit because I got an incorrect syntax error:

    Code:
    <script type="text/javascript">
    
    window.onload=function() {
    
    var iDiv = document.documentElement.getElementsByTagName("div");
    
    for(var i=0; i < iDiv.length;i++)
    	{
    	if(iDiv[i].className.toLowerCase()=='inner')
    		{
    		iDiv[i].onmouseover=function(){dojo.fadeOut({node:this,duration:200}).play();}
    		iDiv[i].onmouseout=function(){dojo.fadeIn({node:this,duration:200}).play();}
    		}
    	}
    }
    </script>


  •  

    Posting Permissions

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