Página de Domfun
Experiments with DOM + Javascript
Note: Most of this stuff only (moderately) tested in Firefox on XP. No guarantees with IE et. al.
reverser
Changes the body element's "direction" style from "rtl" to "ltr" and back. Click click click.
view scriptcolorizer
running!Click to start changing the color of every letter on the page. Click the link again to stop it. This one's pretty goofy--it works by finding all the text nodes on the page and inserting a span around every single letter, then it goes into a setInterval call that just picks a random one of our spans and changes its color to something random.
Let it run for a while for maximum pleasure.
view scriptview script link
This is how the "view script" links work on this page. When clicked, a div is inserted into the DOM tree after the clicked link and the desired Javascript code is inserted as a text node of the newly created div. Subsequent clicks of the link just show or hide the code-filled div.
I could have just copied the Javascript into a div in the static page and changed the style to show/hide upon link click, but I didn't want to duplicate all the Javascript in the page just to be able to show it. Besides, it's more fun to do it dynamically.
view scriptXMLHttpRequest
This is being used to load and submit comments at this site. There's a good summary of the use and capabilities of XMLHttpRequest here. Using this for the comments allows the static pages to load immediately while the comments are retrieved "in the background," resulting in quicker site response and a better customer experience, which is top priority at Fetid Cascade. Enjoy!
Tables
HTML tables are ripe for DOM manipulation. See this page for some examples of a sortable table and other tricks.
Loading comments...