SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript/Prototype Pause on MouseOver

    Hi,

    I'm using this simple slideshow and wondered if anyone knew how to make it pause when I moved my mouse over it and then start again if I move my mouse off the image?

    There is a demo of the slideshow here:
    http://script.aculo.us/stuff/simplest_slideshow/

    This is the main code:

    Code:
    <script>
    setInterval(function(){
      var imgs = $$('.fadein img'), 
       visible = imgs.findAll(function(img){ return img.visible(); });
      if(visible.length>1) visible.last().fade({ duration: 1 });
        else imgs.last().appear({ duration: 1, 
          afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
    }, 2000);
    </script>
    Thanks!

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Columbus, OH
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I am surprised that that official demo at script.aculo.us has so many W3C errors in markup....Oh well, here is answer for your question:

    You should iterate each image and handle mouseenter/mouseleave events. I just used a global variable for this sample to make it easier (however this is not the best way).

    Code:
    <script type="text/javascript">
    
    var duration = 3000;
    var showNextImage = true;
    
    $$('.fadein img').each(function(el){ el.observe('mouseenter', function() { showNextImage = false; }); });
    $$('.fadein img').each(function(el){ el.observe('mouseleave', function() { showNextImage = true; }); });
    
    setInterval(function(){
    	if(!showNextImage){ return; }
    	var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
    	if(visible.length > 1) {
    		visible.last().fade({ duration: .3 });
    	} else {
    		imgs.last().appear({ duration: .3, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
    	}
    }, duration);
    
    </script>
    This could be specific to the task you are trying to solve and I would actually advise you to learn jQuery. The same operation could be done with less code and effort.
    Darren Stevenson - Programmer
    www.htmlBlender.com
    Hand coding services for XHTML, CSS, AJAX, and more!

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this and the slideshow works but it does not pause on I mouse over.

    (I'm using this on a ecommerce site which already uses scriptaculous so unfortunately jquery isn't an option)

    Thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work by doing this:

    Code:
    <script type="text/javascript">
    var duration = 4000;
    var showNextImage = true;
            function stop_slideshow() {
                showNextImage = false; 
            }
            
            function start_slideshow() {
                showNextImage = true; 
            }
    setInterval(function(){
    	if(!showNextImage){ return; }
    	var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
    	if(visible.length > 1) {
    		visible.last().fade({ duration: 1 });
    	} else {
    		imgs.last().appear({ duration: 1, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
    	}
    }, duration);
    </script>
    The added onmouseover and onmouseout to the ul:

    Code:
     <ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()">
          <li><a href="http://google.com"><img src='slider.jpg' alt="" /></a></li>
          <li><a href="#"><img src='slider1.jpg' alt="" /></a></li>
        </ul>


Bookmarks

Posting Permissions

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