Question

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>
Was it helpful?

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top