Experiments with Advanced Use of the Browser DOM

Warning: most of this stuff will require a fully DOM-compliant browser, which means Internet Explorer 5.5 or better, or Firefox, or Safari, or Opera. They may work in other browsers; alternatively, they may not.

All this code is licensed under the X11 licence (sometimes called the "MIT licence").

Resources

  • Apply a CSS theme with a nice wave effect - View transitions across pages, when both pages are the same page
  • A Family Fortunes board generator - Our survey says... fill in your own answers!
  • Setting a custom ghost image when using HTML5 drag and drop - A surprising, and dreadfully repugnant, trick to use custom elements as a draggable "ghost image" when using HTML5's draggable="true" native drag-and-drop support
  • Secrets of JavaScript Closures - A presentation about closures in JavaScript and some neat tricks you can do with them
  • Labelify - A jQuery plugin to automatically add helpful text from <label> elements into your text fields with the minimum of configuration
  • Generated Table of Contents - Add a table of contents to your HTML documents by simply adding one JavaScript library
  • Caps Lock warning - Warn users when Caps Lock is unknowingly turned on while entering a password into a web form. Published as part of 24 Ways.
  • Truncated text - Chop off text in a div so that it shows only the first line.
  • DOM Image Annotation - Add annotations to your images, a la Flickr, using unobtrusive DHTML.
  • JavaScript Event Sheets - A way of attaching event handlers to HTML elements specified by CSS selectors.
  • Sortable tables - Make your tables sortable by clicking the headers, just by adding this JavaScript library to your pages.
  • CSS image replacement technique - How to do something like the Fahrner Image Replacement technique without requiring spurious tags in your HTML.
  • SUPERSEDED: CSS hash hack - Yet another way of hiding CSS property declarations from some browsers.
  • Nice titles - Have your link titles pop up in a prettier way, taking some hints from the Apple designers of Safari.
  • Smoothscroll - Make links internal to a page scroll smoothly to the destination rather than jumping. Described in detail in an article for Sitepoint.
  • Drop shadows - Drop shadows using JavaScript and CSS as per Unobtrusive DHTML -- just add a class to your text and have it grow a drop shadow! Works cross-browser, not using IE's proprietary filters.
  • Unobtrusive DHTML, and the power of unordered lists - An essay on how to make your DHTML unobtrusive to both user and developer, and how to turn nested unordered lists into both drop-down lists and explorer-trees. The updated version of aqTree2, in fact, with lots of other cool stuff besides.
  • searchhi - Have your site automatically highlight searched-for words when your pages are reached from search engine searches.
  • aqGoogle - Draw pretty pictures using the Google Search! Release your mad artistic skillz!
  • aqTree - Expand/collapse trees without the hard work -- just add some nested ULs to your page and then have aqTree turn them into trees for you. (Updated to aqTree2, 30.07.2002)
  • Klip5ter - The Microsoft Office paperclip for the web! Have all your web forms offer helpful hints to your users!