So we’ve got a bulleted list of dates, and one block for each date with a bit of detail. The list comes first, with each item clickable, triggering (with JS+CSS) the display of the appropriate block.
This actually required us to tweak the default behavior of the HTML link element. When you click on a date link with CSS and JS enabled, the date block is displayed, without any other changes to the page’s position, nor to the URL. This is achieved through adding a
return false to the onclick event. However, if you haven’t got CSS or JS, all blocks being displayed by default, so clicking on the link must make you jump down to the appropriate block: it’s a simple anchor.
Without JS enabled, it’s simple: the href property of the links is an anchor, so it simply works. When you’ve got CSS disabled, and JS enabled, on the other hand, it’s a little more tricky.
The solution I found was to check the height of an element hidden using CSS. Typically, these are navigation tools used to skip the navigation bar when you’re using a non-CSS browser. They are assigned a class which specifies the following rule:
The interesting property is their
display: none; is honored (i.e. when CSS are used), the
return false; is replaced by
return (testObj.offsetHeight > 0); with
textObj the paragraph that should be hidden.
The page then remains very user-friendly, no matter which combination of CSS and JS is used (yes+yes, yes+no, no+yes, no+no).
Demo soon online.