# 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](/content/code/browser/licence.html) (sometimes called the "MIT licence").

## Resources

- [Apply a CSS theme with a nice wave effect](/content/code/browser/theme-transition.html) - View transitions across pages, when both pages are the same page
- [A Family Fortunes board generator](/content/code/family-fortunes/index.html) - Our survey says... fill in your own answers!
- [Setting a custom ghost image when using HTML5 drag and drop](/content/code/browser/custom-drag-image.html) - 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](/content/code/browser/secrets-of-javascript-closures/index.html) - A presentation about closures in JavaScript and some neat tricks you can do with them
- [Labelify](/content/code/browser/labelify/index.html) - A jQuery plugin to automatically add helpful text from `<label>` elements into your text fields with the minimum of configuration
- [Generated Table of Contents](/content/code/browser/generated-toc/index.html) - Add a table of contents to your HTML documents by simply adding one JavaScript library
- [Caps Lock warning](http://24ways.org/2007/capturing-caps-lock) - 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](/content/code/browser/text-truncate/index.html) - Chop off text in a div so that it shows only the first line.
- [DOM Image Annotation](/content/code/browser/annimg/annimg.html) - Add annotations to your images, _a la_ Flickr, using unobtrusive DHTML.
- [JavaScript Event Sheets](/content/code/browser/jses/index.html) - A way of attaching event handlers to HTML elements specified by CSS selectors.
- [Sortable tables](/content/code/browser/sorttable/index.html) - Make your tables sortable by clicking the headers, just by adding this JavaScript library to your pages.
- [CSS image replacement technique](/content/code/browser/lir/index.html) - How to do something like the Fahrner Image Replacement technique without requiring spurious tags in your HTML.
- SUPERSEDED: [CSS hash hack](/content/code/browser/csshacks/hash/index.html) - Yet another way of hiding CSS property declarations from some browsers.
- [Nice titles](/content/code/browser/nicetitle/index.html) - Have your link titles pop up in a prettier way, taking some hints from the Apple designers of Safari.
- [Smoothscroll](/content/code/browser/smoothscroll/index.html) - Make links internal to a page scroll smoothly to the destination rather than jumping. Described in detail in an [article for Sitepoint](http://www.sitepoint.com/article/scroll-smoothly-javascript).
- [Drop shadows](/content/code/browser/aqdropshadow/index.html) - 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](/content/code/browser/aqlists/index.html) - 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](/content/code/browser/searchhi/index.html) - Have your site automatically highlight searched-for words when your pages are reached from search engine searches.
- [aqGoogle](/content/code/browser/aqgoogle/index.html) - Draw pretty pictures using the Google Search! Release your mad artistic skillz!
- [aqTree](/content/code/browser/aqtree2/index.html) - 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](/content/code/browser/klip5ter/klip5ter.html) - The Microsoft Office paperclip for the web! Have all _your_ web forms offer helpful hints to your users!