Question

I have a simple JQuery function that makes a DIV’s content scroll sideways, endlessly. It works fine, but when it reaches the end of the content, it keeps scrolling but nothing is shown, which is to be expected since the content is finished. I want to make it repeat, so it will never stop scrolling and when the content is done, it repeat itself.

So far, the only way that way I figured to do this is by duplicating the div content by many times, ie:

var element = $("#divContent")
for(var x=0; x<=50; x++)
    element.html( element.html + element.html );

I think this will work, but there’s gotta be a better way of doing this.

Answer 1

If you initially create 2 versions of the content – when the first item goes completely out of view you can move it to become the last item using css (you can just use a relative or absolute positioning). I’ve made an animation to illustrate how it works. You have to set overflow:hidden on the parent container (#wrapper in the example) and restrict it’s width for this to work properly.