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>
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/