Scrolling a scrollable DIV without Javascript?

Question

I basically have a fixed width DIV with an unordered list inside that overflows to the right of the DIV when the list is too large. It basically looks like this:

http://i.imgur.com/Tr36X.jpg

Each list item (basically a 60x60 image) is clickable and it leads to a page with the same DIV element and same list items, except one is highlighted a different colour to show it's the current image. What I'm trying to do is get the one that's currently selected (it has a class="active" attribute) to show in the middle of the scrolling DIV, like so:

http://i.imgur.com/YtF1y.jpg

The only way I can think of doing it would be to have a Javascript file included on the page to find what list item has the class="active" attribute, and then scroll along to it using Javascript. Problem with this is, it won't initially be scrolled to the correct position when the page loads, the user will see it "jump" into position when the Javascript loads and gets executed.

Is there a way to do what I want without Javascript? I don't mind a little bit of markup and CSS hackery if need be.

Thanks!

Answer 1

I doubt that this can be solved only with CSS and HTML. Unless you use some other language (like PHP) that can generate you an HTML with changed order of DIVs.

But, I can solve your Javascript "jumping" problem.

1. You initially show your DIVs with css style="display:none;"
2. Do the scrolling with JavaScript (and other stuff like changing order of DIVs if needed).
3. Set css style="display:block;"

i.e. items will show up on the screen already scrolled.