Question

I’ve managed to get this far and it works great for solid width divs but can’t work out how to manipulate it to work when the width of the div changes.

Question: How do I make this function take into account the different div widths after each ’round’?

var horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $('#horizontalScroller li').width();
    if(left < temp) {
        left = $('#horizontalScroller').width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (left-60) }, 2000, 'linear', function () {
      horizontalScroller($(this));
    });
}


$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller li").each(function () {
          $(this).css("left", i);
          i += $(this).width();
          horizontalScroller($(this));
    });

});

Working example (with fixed width): http://jsfiddle.net/GL5V3/
Working example (with different widths): http://jsfiddle.net/wm9gt/

Answer 1

Well this was mildly fun, understood how your code works, but before I did that…

I rewritten it to this: (working fiddle)

function horizontalScroller(ulSelector) {
  var horizontalSpan=0;
  var collection=[];
  function animate(index) {
    var cur=collection[index];
    var left=parseInt(cur.elem.css('left'));
    if(left < cur.reboundPos) {
        left+=horizontalSpan;
        console.log(left);
        cur.elem.css('left',left);
    }
    cur.elem.animate(
      { left: (left-60) },
      2000,
      'linear',
      function () {animate(index)}
    );
  }
  $(ulSelector).find('li').each(function() {
    var $this=$(this);
    var width=$this.width();
    $this.css('left',horizontalSpan);
    collection.push({reboundPos: -1 * width, elem: $this});
    horizontalSpan+=width;
    animate(collection.length-1);
  });
  console.log(collection);
  console.log(horizontalSpan);
}


$(document).ready(function() {
    horizontalScroller('#horizontalScroller');
});

Then I went back to your code and did this:

var horizontalSpan = 0;// swapped i for a "global" variable
var horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $elem.width();// updated to the correct width
    if(left < temp) {// now out of bounds is properly calculated
        left += horizontalSpan;// proper "wrapping" with just one addition
        $elem.css("left", left);
    }
    $elem.animate({ left: (left-60) }, 2000, 'linear', function () {
      horizontalScroller($(this));
    });
}


$(document).ready(function() { 
    $("#horizontalScroller li").each(function () {
          $(this).css("left", horizontalSpan);// horizontalSpan!!!
          horizontalSpan += $(this).width();// horizontalSpan!!!
          horizontalScroller($(this));
    });
});

If you’ve got questions or want to tweak it a bit. I’d be happy you to help you along. But my hopes are that you will manage on your own.

P.S. My initial comment was rude, you’re horizontal scrolling is ok thumbs up (but you were hoping the values for some of those .width() calls to be way different)