title: Javascript slider pause function on hover
body: <p>Looking for a little help with this slider that came with a Magento Template I purchased.</p>
  
  <p>I'm trying to add a pause on hover and resume on mouse out but am very new to getting my hands this dirty with the JavaScript. </p>
  
  <p>Hoping for a push in the right direction</p>
  
  <p>Here is the code I'm working with </p>
  
  <pre><code>function decorateSlideshow() {
  var $$li = $$('#slideshow ul li');
  if ($$li.length &gt; 0) {
  
      // reset UL's width
      var ul = $$('#slideshow ul')[0];
      var w = 0;
      $$li.each(function(li) {
          w += li.getWidth();
      });
      ul.setStyle({'width':w+'px'});
  
      // private variables
      var previous = $$('#slideshow a.previous')[0];
      var next = $$('#slideshow a.next')[0];
      var num = 1;
      var width = ul.down().getWidth() * num;
      var slidePeriod = 3; // seconds
      var manualSliding = false;
  
      // next slide
      function nextSlide() {
          new Effect.Move(ul, { 
              x: -width,
              mode: 'relative',
              queue: 'end',
              duration: 1.0,
              //transition: Effect.Transitions.sinoidal,
              afterFinish: function() {
                  for (var i = 0; i &lt; num; i++)
                      ul.insert({ bottom: ul.down() });
                  ul.setStyle('left:0');
              }
          });
      }
  
      // previous slide
      function previousSlide() {
          new Effect.Move(ul, { 
              x: width,
              mode: 'relative',
              queue: 'end',
              duration: 1.0,
              //transition: Effect.Transitions.sinoidal,
              beforeSetup: function() {
                  for (var i = 0; i &lt; num; i++)
                      ul.insert({ top: ul.down('li:last-child') });
                  ul.setStyle({'position': 'relative', 'left': -width+'px'});
              }
          });
      }
  
      function startSliding() {
          sliding = true;
      }
  
      function stopSliding() {
          sliding = false;
      }
  
      // bind next button's onlick event
      next.observe('click', function(event) {
          Event.stop(event);
          manualSliding = true;
          nextSlide();
      });
  
      // bind previous button's onclick event
      previous.observe('click', function(event) {
          Event.stop(event);
          manualSliding = true;
          previousSlide();
      });
  
  
      // auto run slideshow
      new PeriodicalExecuter(function() {
          if (!manualSliding) nextSlide();
          manualSliding = false;
      }, slidePeriod);
  
  
  }
  </code></pre>
  
  <p>Now I'm guessing the best way would be to manipulate a hover or mouseover observer similar to the next and previous ones to stop and start but I'm just not sure on how to set this up.</p>
  
  <p>Would appreciate a push in the right direction!</p>
  
  <p>Edit ....</p>
  
  <p>So I'm getting much closer but I seem to have a problem yet hopefully someone who know about prototype can help.</p>
  
  <p>I got it to work by adding this variable</p>
  
  <pre><code>var stopSliding = false;
  </code></pre>
  
  <p>and then adding an if like so </p>
  
  <pre><code>function nextSlide() {
          if (!stopSliding) {
          new Effect.Move(ul, { 
              x: -width,
              mode: 'relative',
              queue: 'end',
              duration: 1.0,
              //transition: Effect.Transitions.sinoidal,
              afterFinish: function() {
                  for (var i = 0; i &lt; num; i++)
                      ul.insert({ bottom: ul.down() });
                  ul.setStyle('left:0');
              }
          });
      }
  }
  
      // previous slide
      function previousSlide() {
          if (!stopSliding) {
          new Effect.Move(ul, { 
              x: width,
              mode: 'relative',
              queue: 'end',
              duration: 1.0,
              //transition: Effect.Transitions.sinoidal,
              beforeSetup: function() {
                  for (var i = 0; i &lt; num; i++)
                      ul.insert({ top: ul.down('li:last-child') });
                  ul.setStyle({'position': 'relative', 'left': -width+'px'});
              }
          });
      }
      }
  </code></pre>
  
  <p>then </p>
  
  <pre><code>ul.observe('mouseover', function(event) {
          stopSliding = true;
  
      });
  
  
      ul.observe('mouseout', function(event) {
          stopSliding = false;
      });
  </code></pre>
  
  <p>This method works but only Safari will auto start my slideshow now and firefox needs interaction to trigger a start.</p>
  
  <p>However I did find that switching the var to true at the start and switching around the order of the mouseovers it then auto starts fine in Firefox and not in Safari.</p>
  
  <p>Had enough for this evening.</p>