infinite loop
Opened this issue · 9 comments
is there a config option that I'm missing that will allow the scroller to continuously loop -- so when it gets to the end of the
Hi @lcdservices it already works that way.
I did some more testing and found the issue. If the beginning and final element exist within the containing div at the same time -- even if they are only partially revealed -- the scroller will stop.
In my case, I have a scroller that has three "li" elements, each of which is about three lines of text long. by the time it gets to the bottom of the third element, only part of the last line of the first element is exposed. but that is sufficient to stop the scroller from looping -- it just stays with the last element fully exposed and the first element cut off.
Hey @lcdservices ,
It's funny I came across the exact same bug just yesterday, it was working just fine before, until I made certain changes to the distance which was greater than the amount of switchItems x each item's width.
I don't know why it happened but turns out if you make sure (through jquery on a client side script) that each item (li) has a width that would perfectly fits the wrapper's (div) width, it works. Hope it helps you solve your issue.
@lcdservices , I got the point now. If the first element is still visible and the 'ul' element is not high enough, it's not possible to finish this turn of scrolling. That makes the scroller stop. You can try to set a larger height of your 'ul' element. See this demo: http://jsbin.com/kegimo/2
I worked around it by reducing my containing div slightly (so the first item was off screen by the time the third finished displaying) -- which allowed it to continuously scroll. but it might be something you want to look at improving at some point.
nice plugin by the way. very easy to implement.
I'm experiencing the same issue. However my bulletin items are pulled from a database so it's not possible to know how many there will be or their heights.
So after some more tinkering with this i think i've come up with a solution.
The idea is to check if the last item will fit completely in the container
element if part of the last item lies outside the container
then clone the items in the list. This will ensure that there are enough items to force an infinite scroll.
// check if the lastItem check is needed
if ( config.infiniteLoop === true && containerUL.outerHeight() > container.outerHeight()) {
var children = $.makeArray(containerUL.children()),
lastItem = children.pop(),
height = 0;
children.forEach(function(item){
height += $(item).outerHeight(true);
});
// check if part of the lastItem is outside of the conatiner
if (height < container.outerHeight() && ($(lastItem).outerHeight(true) + height) > container.outerHeight()) {
containerUL.append(containerUL.children().clone());
}
}
The "fix" above is only for vertical scrolling.
Hopefully i'll find the time to sort this and create a proper pull request
Todo
- Make work with horizontal scrolling
- Refactor to a function
- Check how other options may effect this
this is so old and banished, if someone interested this should have a new maintainer
the problem is the line if (newScrollOffset >= scrollDistance)
in scrollForward function. it doesn't seems to support infinite loop as expected
+1
I'm having same problem.