CODEWITHSUNDEEP
javascriptjquery
Sebass van Boxel
Sebass van Boxel

Reputation: 2602

Same function on multiple div classes doesn't work

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.

Upvotes: 0

Views: 438

Answers (5)

Chris
Chris

Reputation: 5605

Try this

http://jsfiddle.net/FsrbZ/10/

I added a if statement that resets the variable when it is less than -490 (when the counter gets to step 4)

Upvotes: 1

phant0m
phant0m

Reputation: 16905

This works. As already mentioned by Matei Mihai, the $totalleft variable was shared among the calls. Further, I have also moved the setInterval call into the quoteSlide()function, so you don't have to repeat yourself.

I have moved the variable into the quoteSlide() function, so every call gets its own instance of that variable.

Another thing about JavaScript:

  • Javascript is not PHP, you don't need to prefix your variables with a $-sign! Personally, I use the convention to prefix all jQuery objects with a $.

PS: You may want to remove the first call to callback(), to allow the visitor to actually read the first quote. I have included it because that's the way it worked in your original code.

function quoteSlide(divname) {
    var $totalleft = 0;
    var callback = function() {
        $total = ($(divname + " > div").size())
        $width = $total * 160;
        $(divname).css('width', ($width));
        if ($width - 160 > $totalleft * -1) {
            $currentleft = $(divname).css('left');
            $step = -160;
            $totalleft = parseInt($currentleft) + $step;
        } else {
            $totalleft = 0;
        }

        $(divname).animate({
            left: $totalleft
        }, 'slow', 'swing', function() {});
    };
    callback(); # <-- I would remove this
    setInterval(callback, 3400);
}

quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');​

Upvotes: 2

ditscheri
ditscheri

Reputation: 579

Well, some were faster, but here's yet another solution, that's works: http://jsfiddle.net/FsrbZ/6/

Upvotes: 1

Snake Eyes
Snake Eyes

Reputation: 16764

What's about

$total = ($(divname+" div").size()) ?

http://jsfiddle.net/SnakeEyes/FsrbZ/2/

Let me know if that is what you want

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

That's because your function uses the same $totalleft variable for all calls, so when you call the function multiple times, the number you store in the $totalLeft variable is not correct.

Check out this http://jsfiddle.net/FsrbZ/3/

var $totalleft = new Array();
function quoteSlide(divname){
    $total = ($(divname+" > div").size())
    $width = $total * 160;
    $(divname).css('width', ($width));
    if ($width - 160 > $totalleft[divname] *-1){ 
        $currentleft =  $(divname).css('left');
        $step = -160;
        $totalleft[divname] = parseInt($currentleft)+$step;
    }else{
        $totalleft[divname] = 0;
    }

    $(divname).animate(
        { 
            left: $totalleft[divname]
        },
        'slow', 
        'swing',
        function() { 
        });
}

Upvotes: 1

Related Questions