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 8 of 8
  1. #1
    wys
    wys is offline
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Stop multiple onmouseover firing continuously

    Hello all,

    I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view.

    The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code:

    function previewimage(loadimg){
    jloadimg='<img src="../images/'+loadimg+'.png" />';

    //stimulate a fade in effect by making the image has 0.7 opacity first
    $(#largeimage).fadeTo('fast', 0.7, function() {
    });
    $(#largeimage).fadeTo('slow', 1, function() {
    });

    document.getElementById('largeimage').innerHTML=jloadimg;
    }

    for the list of thumbnail images, I have:

    <a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a>
    <a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a>
    <a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a>

    How do I cancel multiple event from running continuosly if the previous one is still in queue?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    maybe set a little timeout so the code can distinguish between an actual mouseover and just passin' through?

    Code:
    <a onMouseOver="loadimg='imagefile1'; previewimage();"><img src="path/to/thumbnail/image1.png" /></a>
    <a onMouseOver="loadimg='imagefile2'; previewimage();"><img src="path/to/thumbnail/image2.png" /></a>
    <a onMouseOver="loadimg='imagefile3'; previewimage();"><img src="path/to/thumbnail/image3.png" /></a>
    
    <script type="text/javascript">
    var loadimg;
    
    function previewimage(){
    timer=setTimeout(showPic,1000);
    }
    
    function showPic(){
    jloadimg='<img src="../images/'+loadimg+'.png" />';
    
    //stimulate a fade in effect by making the image has 0.7 opacity first
    $(#largeimage).fadeTo('fast', 0.7, function() {
    });
    $(#largeimage).fadeTo('slow', 1, function() {
    });
    
    document.getElementById('largeimage').innerHTML=jloadimg;
    	}
    }
    </script>
    Last edited by xelawho; 12-28-2011 at 08:00 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Ummm...no, not quite, Xelawho.

    All that will do is invoke previewimage multiple times which will then set the timeout to actually show the picture 1 second later. But if you call previewimage 10 times, you will have then set 10 timeouts. And so you haven't really fixed the problem. (If you were only loading the image into the <img> tag it wouldn't matter, but as the code is written, you'd be starting multiple fadein's and that won't look real pretty.)

    Code:
    <a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a>
    <a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a>
    <a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a>
    
    <script type="text/javascript">
    var timer = null;
    var imagefile = null;
    
    function previewimage( fname )
    {
        imagefile = fname;
        if ( timer  != null ) clearTimeout(timer); // remove prior timer
        timer=setTimeout( showPic, 1000 ); // 1000 is probably too big...500 or 300 or so maybe better...experiment
    }
    
    function showPic( )
    {
         clearTimeout(timer); // remove prior timer
    
         jloadimg='<img src="../images/'+imagefile+'.png" />';
    
        //simulate a fade in effect by making the image has 0.7 opacity first
        $(#largeimage).fadeTo('fast', 0.7, function() { });
        $(#largeimage).fadeTo('slow', 1, function() {});
    
        document.getElementById('largeimage').innerHTML=jloadimg;
    }
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    wys (12-28-2011)

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    well, at least I was close - you should have seen how dumb my first answer was

    but just to clarify, doesn't this:

    Code:
    function previewimage(){
    timer=setTimeout(showPic,1000);
    }
    overwrite the Timeout every time the function gets called? because I tested my code without the jQuery stuff and with longer timeouts and long pauses between mouseovers and it only ever loaded one image - I would think if there were various timeouts running, multiple images would load before loading the one that was mouseover'd?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Quote Originally Posted by xelawho View Post
    but just to clarify, doesn't this:
    Code:
    function previewimage(){
    timer=setTimeout(showPic,1000);
    }
    overwrite the Timeout every time the function gets called?
    No. It overwrites the value of timer but it sets up a completely new timeout.

    Want proof?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var timer;
    
    function demo()
    {
        for ( var t = 0; t < 10000; t += 1000 )
        {
            timer = setTimeout( xelawho, t );
        }
    }
    
    var words = ["Now","is","the","time","for","all","men","to","come","to!"];
    var w = 0;
    function xelawho( )
    {
        document.getElementById("message").innerHTML += words[w] + " ";
        ++w;
    }
    
    window.onload = demo;
    </script>
    </head>
    <body>
    <h2 id="message"></h2>
    </body>
    </html>
    If timer = setTimeout( xelawho, t ); wiped out the prior timer each time, you would only see the word "to!" appear.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    BTW, if it's not obvious, that for loop sets 10 timeouts WHAM! all in a few microseconds. Setting a timeout doesn't really take much time at all, as you are only asking JS to schedule an automatic event in N milliseconds.

    Maybe we should prove that, as well?
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var timer;
    
    function demo()
    {
        for ( var t = 0; t < 10000; t += 1000 )
        {
            timer = setTimeout( xelawho, t );
        }
        document.getElementById("demodone").innerHTML = "demo function is finished";
    }
    
    var words = ["Now","is","the","time","for","all","men","to","come","to!"];
    var w = 0;
    function xelawho( )
    {
        document.getElementById("message").innerHTML += words[w] + " ";
        ++w;
    }
    
    window.onload = demo;
    </script>
    </head>
    <body>
    <h1 id="demodone"><h1>
    <h2 id="message"></h2>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    that's OK - I already made my own proof:
    Code:
    function showPic(){
    alert("loading: "+loadimg)
    jloadimg='<img src="'+loadimg+'.jpg" />';
    document.getElementById('largeimage').innerHTML=jloadimg;
    	}
    and yes... it pops as many alerts as there have been mouseovers

    thanks again for the explanation

  • #8
    wys
    wys is offline
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you xelawho and Old Pedant for helping. The post on #3 resolved my problem. I reduce timer=setTimeout( showPic, 1000 ); to a smaller value because I want the image to begin the "animation" faster. If the user intentionally moves really fast across multiple thumbnails, they might still see it flash twice, but user who surf normally shouldn't see this problem.

    Thanks xelawho for steering into the right direction and
    Thanks Old Pedant for the useful explanation.


  •  

    Posting Permissions

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