Same function on multiple div classes doesn't work
- by Sebass van Boxel
I'm doing something terribly wrong and just can't find the solution for it.
Situation:
I've got a number of products with a number of quotes per product. Those quote automatically scroll in a div. If the scroll reaches the last quote is scroll back to the first one.
What works:
The function basically works when it's applied on 1 div, but when applied on multiple div it doesn't scroll back to the first one or keeps scrolling endlessly.
This is the function i've written for this:
function quoteSlide(divname){
$total = ($(divname+" > div").size())
$width = $total * 160;
$(divname).css('width', ($width));
console.log ($totalleft *-1);
if ($width - 160 > $totalleft *-1){
$currentleft = $(divname).css('left');
$step = -160;
$totalleft = parseInt($currentleft)+$step;
}else{
$totalleft = 0;
}
$(divname).animate(
{
left: $totalleft
}, // what we are animating
'slow', // how fast we are animating
'swing', // the type of easing
function() { // the callback
});
}
It's being executed by something like: quoteSlide('#quotecontainer_1'); in combination with a setInterval so it keeps scrolling automatically.
This is the jsFiddle where it goes wrong (So applied on more than 1 div) http://jsfiddle.net/FsrbZ/.
This is the jsFiddle where everything goes okay. (applied on 1 div)
When changing the following:
quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');
setInterval(function() {
quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');
}, 3400);?
to
quoteSlide('#quotecontainer_1');
setInterval(function() {
quoteSlide('#quotecontainer_1');
}, 3400);?
it does work... but only on 1 quotecontainer.
