Response title
This is preview!
Serial Scroll, infinite scroll
in Using jQuery Plugins
•
12 years ago
Hello,
I am working with the serial scroll tool to create a scrolling tool bar. I am trying to find a way to make the plugin behave similar to a marquee tag works. By default at the end of the scroll the plugin jumps back to the begining by scrolling the list backwards. I would rather just have it jump immediately to the begining with out this animation.
Anyone have any advice? Here is the code so far.
I am working with the serial scroll tool to create a scrolling tool bar. I am trying to find a way to make the plugin behave similar to a marquee tag works. By default at the end of the scroll the plugin jumps back to the begining by scrolling the list backwards. I would rather just have it jump immediately to the begining with out this animation.
Anyone have any advice? Here is the code so far.
- <div class="scrollMask">
<ul>
<li><span class="county">Jackson: </span></li>
<li><span class="county">Bee: </span></li>
<li><span class="county">Coastal Cameron: </span></li>
<li><span class="county">Coastal Willacy: </span></li>
<li><span class="county">Kenedy: </span></li>
<li><span class="county">Kleberg: </span></li>
<li><span class="county">Nueces: </span></li>
<li><span class="county">San Patricio: </span></li>
</ul> //get the width of all the li's in the list
var ulwidth = 0;
$('div.scrollMask li').each(function(index) {
ulwidth += $(this).outerWidth();
});
if ($('div.scrollMask ul li').size() > 0) {
scrollConfig = {
prev: '#severe-weather a.forward',
next: '#severe-weather a.back',
items: 'li',
axis: 'x',
step: 1,
maxdisplayInt : 9,//total number of items
cycle:true,
easing: 'linear',
interval: 1,
duration: 1980,
onBefore: function(e,elem,$pane,$items,pos) {//function that provides continuos loop
console.log($pane);
if (pos === scrollConfig.maxdisplayInt-2) {
console.log("jump back now");
$('div.scrollMask').queue('fx',[]).stop().trigger('stop');
$('div.scrollMask li:first').css({'margin-left' : '0'});
$('div.scrollMask').trigger('start');
return false;
}
},
force: true
}
$('div.scrollMask').serialScroll(scrollConfig);
$('#severe-weather').hover(function(){
$('div.scrollMask').queue('fx',[]).stop().trigger('stop');
},function(){
$('div.scrollMask').trigger('start');
});
}
2