DHTML article deconstructed
7th December 2002
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:
- 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 whyonclick
is the preferable alternative. - 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 thediv
—a yellow background, some padding and a width declaration. - 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 todisplay: block
to make the note visible). - 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.
More recent articles
- Storing times for human events - 27th November 2024
- Ask questions of SQLite databases and CSV/JSON files in your terminal - 25th November 2024
- Weeknotes: asynchronous LLMs, synchronous embeddings, and I kind of started a podcast - 22nd November 2024