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 licenced under the X11 licence (sometimes called the "MIT licence").
- 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
- A jQuery plugin to automatically add helpful text from <label> elements into your text fields with the minimum of configuration
- Generated Table of Contents
- Caps Lock warning
- Warn users when Caps Lock is unknowingly turned on while entering a password into a web for. 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.
- A way of attaching event handlers to HTML elements specified by CSS selectors.
- Sortable tables
- 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.
- Make links internal to a page scroll smoothly to the destination rather than jumping. Described in detail in an article for Sitepoint.
- Drop shadows
- 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.
- Have your site automatically highlight searched-for words when your pages are reached from search engine searches.
- Draw pretty pictures using the Google Search! Release your mad artistic skillz!
- 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)
- The Microsoft Office paperclip for the web! Have all your web forms offer helpful hints to your users!