Question

I am using a div container as a window to slide a list of horizontal li items in and out of view using jquery.

This is what I have so far:
http://jsfiddle.net/TX5fJ/5/

It initializes a list of 8 items and allows you to scroll them left and right within the div window. It also has functions for adding an item to the end of the list and removing an item from the beginning of the list.

What I am trying to do:

1) Add an item to the end of the list (item not visible)

2) Scroll the list to the left to make the item just added visible (first item moves out of view)

3) Remove the item from the head of the list (no longer needed)

The problem is that removing the first item causes the whole list to shift to the left.

If I don’t remove the first item it seems to work. (see my test function)

My concerns with that solution is that the ul will have to be wide enough to hold all the potential items. If I don’t give it a fixed width it does not work.

So i guess I could make it 99999px wide, and use the current method in the test button.

Anyone have a ideas on a better implementation then the current?

Thanks.

Answer 1

You could simply reset the margin-left property of your list after you have removed the list-item from the head:

function RemoveItem() {
    $('#slider-items li').first().remove();
    $('#slider-items').css('marginLeft', 0);
}  

Updated fiddle.