Dynamic "table of contents" generation with jQuery
@taitems listed out some great Frontend Dev Guidelines, some basic do's and dont's split up by sections like: Accessibility, Javascript, CSS, CSS3 & HTML5.
position:fixed to the right of the page is a Table of Contents (TOC) with links to each section. The TOC is dynamically generated with some really light-weight jQuery that I think is interesting enough to take a look at.
The first block loops through all the section headers (which are <h1>s), and injects them as anchor tags into the initially empty TOC wrapper DIV.
$("<a />") is sexy jQuery syntax to create a fresh DOM element.
.data() is a nice way to store metadata about a DOM element. It's nice because it doesn't store the data *in* the DOM, which is notoriously slow.
The second block just adds the click handler and uses the $.scrollTo plugin for some fancy scrolling animation.
It's small, but neat, and it removes the need to maintain a duplicate list of section names.