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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts

    javascript mouseover gets stuck

    Hi,

    I've created a mouse over effect with javascript which fades out a top image to show the image underneath.
    Code:
    <style type="text/css" media="screen">
       .js #animators { position: relative; height: 100px}
       .js #animators div.container { position: absolute; left: 0; top: 0
    
    </style>
    
      <script type="text/javascript">
    
        document.documentElement.className += " js"; // Add js class to the HTML element
        $(function(){
          var $containers = $("#animators > div").hide();
    	  
          $('#show').show();
    
          $('tr td a.c').each(function(i,el){
            var idx = i;
            $(this).click(function(e){
              var $target = $containers.filter(':eq(' + idx + ')');
              if($containers.filter(':visible').not($target).length){
                $containers.filter(':visible').fadeOut();
              }
              $target.not(':visible').fadeIn();
              e.preventDefault();
            })
          })
        });
    </script>
    
    <div class="thumbnail" style="margin-top:5%; margin-right:2%;">
    	    			<div class="visible-image">
    						<img src="images/illustrationslabel.jpg" />
    					</div> 
            			<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
            			</div>
       				</div>
    In the code i've got an onclick function triggering fancybox which allows you to view the image clicked on.
    The problem is that sometimes the mouse over function gets stuck in its fade out process and doesn't work anymore.

    PLZ any help would be so awesome..

    mc

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Is it JQuery? Or what else Framework? Shall we guess?

    You should specify the JavaScript Framework and, in fact, you should have posted this problem in the JavaScript Frameworks Forum. I'll do that for you.

    Do you know what a JavaScript Framework is?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks.. nope don't know what a JS framework is...
    fancybix was built using the JQuery library though (if thats what you asking)

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    OK, so it's JQuery. It is indispensable to know. JQuery is a JavaScript Framework (Library), but is is not the only one. There are about two dozen of different JavaScript Frameworks: See also:

    http://en.wikipedia.org/wiki/JavaScript_framework
    http://en.wikipedia.org/wiki/Compari...ipt_frameworks

    A framework uses custom methods and function (not the native JavaScript ones, well known by every coder), thus when you post a fragment of a frameworks' code without specifying the Framework it is impossible or hard to guess which one could it be. Therefor it is hard to find a solution.

    Take a Framework as a dialect of a language. To translate in/from a dialect it is not enough to know the base language. This is the reason for I asked you to tell us which Framework/Library do you use for that code
    Last edited by Kor; 02-22-2011 at 03:20 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts

    jquery mouseover gets stuck

    ok so i've posted this thread on multiple forums, been waiting for a reply for a really long time, only realizing today that i posted the wrong code!! (i'm laughing to keep myself from crying)
    so here it is, hopefully this will elicit some responses. so below is the jquery fade in fade out code:

    Code:
    $(document).ready(function(){
      $(".appearing-image img").css("opacity",0).fadeTo(500, 0);
    	$(".appearing-image img").mouseover(function () 
    	
    	{
    		if ($(this).is(':animated'))
    		{
    			$(this).stop().fadeTo(250,1);	
    		}
    		else
    		{
    			 $(this).fadeTo(250, 1);
    		}
    		
         
        });
    	$(".appearing-image img").mouseout(function () {
         if ($(this).is(':animated'))
    		{
    			$(this).stop().fadeTo(250,0);	
    		}
    		else
    		{
    			 $(this).fadeTo(250, 0);
    		}
        });
    here is the html code:

    Code:
    <div class="thumbnail" style="margin-top:5%; margin-right:2%;">
    	    			<div class="visible-image">
    						<img src="images/illustrationslabel.jpg" />
    					</div> 
            			<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
            			</div>
       				</div>

    the animation gets stuck if you move your mouse over the image, click the image (to open fancybox) and move the cursor off the image quickly before fancybox opens. hope that helps.

    Please any response would be awesome.

    thanks
    Last edited by mr curious; 02-24-2011 at 04:17 PM.


  •  

    Tags for this Thread

    Posting Permissions

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