This is (probably) more a CSS problem than it is a jQuery problem but you guys are a lot more helpful than the guys on CodingForums so I thought I'd try here first. There is some jQuery stuff involved too
I want to build a dialog that displays a collection of products for comparison. Each product will get it's own div. What I need for these divs to scroll horizontally one div at a time when the user manipulates the left and right scrolling buttons. My first idea was to simply have an overflow:hidden div with the product divs inside and then change the left CSS property of each div to get the scrolling effect. This was problematic because each div would separate out from or squash into it's neighbour a little during the animation and the quality of the scroll was inversely proportional to the number of elements in the div. My second idea is to use an extra div. The outermost div will be a "viewport" div and will be set overflow hidden. Inside this will be a "product strip" div. This will hold the actual product divs. This product strip div needs to be tall enough to hold one row of product divs. and it also needs to have a width sufficient for all the product divs being manipulated. The viewport div will only be wide enough to accomodate a given number of product divs (lets say three for now). The scroll will be achieved by changing the "left" CSS property of the product strip div. Add the width of one product div to it to achieve a right scroll and subtract that value for a left scroll. The advantage of this approach is no matter how many product divs I'm dealing with I only have to manipulate one CSS property, meaning that (in theory) the scroll will be smooth, as my jQuery experience suggests that the more elements you try to animate at a time the worse the results will be. The disadvantage is I don't know how to build the CSS I need. Well that's not strictly correct. I know what I need, but I don't know how to accomplish in a way that is 100% cross browser. I need an outer viewport div, that's overflow hidden and has a width that fits into my layout, say 70% of the browser window width. Inside this needs to go the product strip div. This needs to be as tall as 1 product and as wide as there are as many products inside it. This div must only allow one row of products, and tha row must be able to be arbitarailly long. Finally inside the strip div the product divs will hold the product data and will need to be given a width that is a certain percentage of the viewport div. Say, 1/3 of the width of the viewport div.
