Simon Willison’s Weblog

DHTML article deconstructed

Create Pop-Up Notes with DHTML is a disappointing new article on SitePoint which describes a technique for having a yellow Post-It style note appear when a link is clicked. The example given is for a link that shows the un-abbreviated form of NASA—a task better accomplished using the acronym tag. In addition, I spotted the following problems with the article:

1. The link that triggers the popup note uses javascript: pseudo-protocol. This is bad! Scott Andrew posted a good rant about this back in May, and Evolt has an article explaining why onclick is the preferable alternative.
2. Although the effect uses both CSS and a div element, the example code still recommends formatting the popup note using a fixed width table. This could be replaced by CSS styles on the div—a yellow background, some padding and a width declaration.
3. The code uses visibility: hidden—display: none has better browser support and would have the same end effect (the code would then need to toggle it to display: block to make the note visible).
4. The javascript uses document.all to reference the specified div by default, with object detection used to provide support for Netscape 4 (shudder) and Netscape 6/Mozilla. document.all was only ever used by IE, and IE5 and above support the standards compliant DOM equivalent, document.getElementById (which is also used by Mozilla). The only reason to use document.all is if you desperately need to support IE4, a browser who’s market share is even less than Netscape 4.

lloydi on the SitePoint forums made the excellent suggestion that the content of the notes should appear at the bottom of the page as footnotes, with the links that activate the popup notes doubling up as links to the footnote anchors. That way the content will stay accessible to user agents which do not support javascript.