Search code examples
jqueryticker

Is it possible to pause the jQuery list_ticker plugin on mouseenter?


I am using the list_ticker plugin to scroll through some list elements.

I was wondering if it was possible to pause the ticker when the mouse hovers over it so a user has time to read the contents (it's only a few words, but they include a date and time that someone might want to make note of).

Thanks for looking.

jQuery function:

/* List Ticker by Alex Fish 
// www.alexefish.com
//
// options:
//
// effect: fade/slide
// speed: milliseconds
*/

(function($){
  $.fn.list_ticker = function(options){

    var defaults = {
      speed:4000,
      effect:'slide'
    };

    var options = $.extend(defaults, options);

    return this.each(function(){

      var obj = $(this);
      var list = obj.children();
      list.not(':first').hide();

      setInterval(function(){

        list = obj.children();
        list.not(':first').hide();

        var first_li = list.eq(0)
        var second_li = list.eq(1)

        if(options.effect == 'slide'){
            first_li.slideUp();
            second_li.slideDown(function(){
                first_li.remove().appendTo(obj);
            });
        } else if(options.effect == 'fade'){
            first_li.fadeOut(function(){
                second_li.fadeIn();
                first_li.remove().appendTo(obj);
            });
        }
      }, options.speed)
    });
  };
})(jQuery);

Javascript:

$(document).ready(function() {
    $('#next-ex').list_ticker({
        speed: 6000,
        effect: 'fade'
    });
});

HTML:

<ul id='next-ex'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Solution

  • Obviously there is no such functionality built in this plugin. Two options here: google for more advanced plugin or quick and dirty patching.

    (function($){
      $.fn.list_ticker = function(options){
    
        var defaults = {
          speed:4000,
          effect:'slide'
        };
    
        var options = $.extend(defaults, options);
    
        return this.each(function(){
    
          var obj = $(this);
          var list = obj.children();
          var stopped = false; //flag if we should stop ticking
          list.not(':first').hide();
    
            obj.hover( function(){ //adding hover behaviour
                stopped = true;
            }, function(){
                stopped = false;
            });
    
    
          setInterval(function(){
              if(stopped) {return;} //Quick check inside interval
    
            list = obj.children();
            list.not(':first').hide();
    
            var first_li = list.eq(0)
            var second_li = list.eq(1)
    
            if(options.effect == 'slide'){
                first_li.slideUp();
                second_li.slideDown(function(){
                    first_li.remove().appendTo(obj);
                });
            } else if(options.effect == 'fade'){
                first_li.fadeOut(function(){
                    second_li.fadeIn();
                    first_li.remove().appendTo(obj);
                });
            }
          }, options.speed)
        });
      };
    })(jQuery);
    

    Working example http://jsfiddle.net/tarabyte/8zLuY/