How can I cause the browser to scroll an element horizontally to a pre-defined location without using JavaScript?

Question

I'm working on 'timeline' project, where I have content inside of list items, in a horizontal unordered list. This is contained in a div, so you can scroll left to right through the content.

My client would like buttons to 'goto' each era. I know this is easily achieved through JavaScript. However they also want this to be functional without JavaScript. I've tried adding anchors to each item, but this doesn't really work since you can't control the exact position the browser want's to end up at. It's very buggy using the anchors with horizontal scrolling.

Any ideas?

Answer 1

Use a vertical timeline (the whole page scrolls, no inner scrollbars) when JavaScript isn't available. Anchors work reasonably well in that scenario. An easy way to achieve this is to make the styles that collapse your list and its containing div dependent on a class higher up in the DOM hierarchy, and set that class at load-time using JavaScript. Something like,

.jsEnabled .containingDiv { height: 10em; overflow: auto; } 
.jsEnabled .timelineList li { width: 6em; float: left; }

...

function loadTimeStuff()
{
  // enable styles that require JS-assisted scrolling
  document.body.className = "jsEnabled"; 
  // ...
}

Sure, it won't look as fancy as the full-blown JS-enhanced page, but it's a fallback - if users want the fancy stuff, they need only use a JavaScript-enabled browser...

Answer 2

You're stuck with javascript here for the most part -- as you found out, anchors don't really do the job.

You do have one other alternative, though you probably wont like it any better: Flash.

Answer 3

You'd have to position the anchors at a certain offset to the item you want to have displayed. F.e. if you want the item in the middle of the screen you would have to position the anchor at x = item.x-screenWidth/2 and y = item.y-screenHeight/2, approximately. I don't think there's another solution, but using Javascript.

Answer 4

I'm afraid you are out of luck if you have to make this work without JavaScript. At least without some hideous hacking that would involve postbacks and dynamically generating some CSS for offsetting the position of the timeline ...

But as Shog9 has said, non JavaScript version would be a fall-back and can't be expected to work as well as the JS version (why would you need JS then) ...