I have a sample with 10 divs in a row, places in one container, in the footer of the site. This site will be a responsive one, it will work on smartphones too.
On smartphones, I want to make a horizontal scrollview, but I need the overflown divs (for example, 4,5,6,7,8,9,10) to be placed in a row, outside the viewport (I will slide them in). With the css from this jsFiddle, the divs that don’t have place in the row are placed under the viewport, not in the same row. How can I place them in the same row?
Basically, I want just n squares in the viewport, the rest of them, I will slide them in.
P.S. I’m trying to do this manually, are there some scroll viewer plugins in jQuery? (not jQuery Mobile)
I think you might need another wrapping div. Most sliders I’ve seen will have a div with
overflow: hiddenand inside that is a really wide div (at least wide enough to hold all the content) that gets moved. As for plugins, I’ve used jQuery Tools a few times