jQuery - If left <= 0, set css to X amount

Question

I've created a scrolling script but i need it to loop when a set div gets to so many pixels to the left, here's my script to do it all but there's no such luck in getting it to work.

var scrollerwidth = 0;

$(window).load(function () {
    $('.scroller ul li').each(function() {
        scrollerwidth += ($(this).width() + 40);
    });
    $(".scrollerTwo").css({left: scrollerwidth});
    ulScrolls();
});

function ulScrolls(){
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
    ulScrolls();
}

$(document).ready(function() {
    var scrollertwoleft = $(".scrollerTwo").offset().left; 
    scrollertwoleft = parseInt(scrollertwoleft, 10);
    scrollerwidth = parseInt(scrollerwidth, 10);
    if(scrollertwoleft <= 100){
        $(".scroller").css({left: scrollerwidth});
        alert("derp");
    }else{
        alert(scrollertwoleft);
    }
});

Also here's the html that it's putting out(note that the jQuery generates the left positions

<div id="homeSponsorsContent">
     <div class="scroller" style="left: -990px;">
         <ul>
            <li><img src="images/abplogo.png"></li>
            <li><img src="images/ansellogo.png"></li>
            <li><img src="images/balfourlogo.png"></li>
            <li><img src="images/beallogo.png"></li>
            <li><img src="images/nhslogo.png"></li>
            <li><img src="images/consortlogo.png"></li>
            <li><img src="images/brocklesbylogo.png"></li>
            <li><img src="images/bupalogo.png"></li>
            <li><img src="images/greenergylogo.png"></li>
            <li><img src="images/hullcitylogo.png"></li>
            <li><img src="images/wittlogo.png"></li>
            <li><img src="images/outredlogo.png"></li>
            <li><img src="images/omglogo.png"></li>
            <li><img src="images/manchesterlogo.png"></li>
            <li><img src="images/northumbrialogo.png"></li>
            <li><img src="images/mimaslogo.png"></li>
        </ul>
     </div>

     <div class="scrollerTwo" style="left: 2164px;">
         <ul>
            <li><img src="images/abplogo.png"></li>
            <li><img src="images/ansellogo.png"></li>
            <li><img src="images/balfourlogo.png"></li>
            <li><img src="images/beallogo.png"></li>
            <li><img src="images/nhslogo.png"></li>
            <li><img src="images/consortlogo.png"></li>
            <li><img src="images/brocklesbylogo.png"></li>
            <li><img src="images/bupalogo.png"></li>
            <li><img src="images/greenergylogo.png"></li>
            <li><img src="images/hullcitylogo.png"></li>
            <li><img src="images/wittlogo.png"></li>
            <li><img src="images/outredlogo.png"></li>
            <li><img src="images/omglogo.png"></li>
            <li><img src="images/manchesterlogo.png"></li>
            <li><img src="images/northumbrialogo.png"></li>
            <li><img src="images/mimaslogo.png"></li>
        </ul>
     </div>
</div>

live Demo

I'd appreciate any help on the matter, thank you

Answer 1

• repeated call of ulScrolls should something like

  setTimeout(function() { ulScrolls() }, 120);
  

  to prevent call stack exceeding and to give time for animation to work.

• checking for .scroller and .scrollerTwo CSS left value should be in ulScrolls.

• li width set to "45px" for testing.

Fiddle

So in total code should look like:

var scrollerwidth = 0;

$(document).ready(function()
{
    $('.scroller ul li').each(function()
    {
        scrollerwidth += $(this).width() + 40;
    });
    $(".scrollerTwo").css({left: scrollerwidth});

    ulScrolls();
});

function ulScrolls()
{
    var scrollertwoleft = parseInt($(".scrollerTwo").css('left')); 
    if (scrollertwoleft <= -scrollerwidth)
    {
        $(".scrollerTwo").css({left: scrollerwidth});
    }
    else
    {
        var scrolleroneleft = parseInt($(".scroller").css('left'));
        if (scrolleroneleft <= -scrollerwidth)
        {
            $(".scroller").css({left: scrollerwidth});
        }
    }    
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);

    setTimeout(function() { ulScrolls(); }, 120);
}