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…