meddle web design: javascript, dhtml and photography experiments

Javascript modules: unobtrusive DHTML

Philosophy

Javascript is a different layer of the style and structure ones, and like CSS, it should not be required but optional, so that without its use the page should be accessible and usable. If the browser cannot interpret the code it will not execute it, but the contents will be accessible. This is generally called script degradation. Now, being more specific, what makes a piece of code unobtrusive?

1. Mix with structure: mainly, script behaviour not being mixed with page contents. This means there will be no intrinsec events inside the document and the file will be stored in a separate .js file.
2. Initialization: the ideal solution is the script being initialized automatically on page load
3. Assign actions with an event handler: because we have avoided the use of intrinsec events we will need a way to associate actions (execute functions) to events captured by different elements on the page.
4. Compatibility: browsers that dont understand the code must do without it throwing no error messages.
5. Capacities detection: to allow the previous point be true we will use object detection instead of browser detection.

I elaborated further this approach in an article on unobtrusive DHTML at diseñorama. Only in spanish but I'll eventually translate to english, as time permits.

Examples

Destroy target _blank

Bye bye target _blank. Wanna know how? Read the official tutorial

FLACCESS: flash keeping accessibility

This script adds flash object(s) to a page if browser has the appropiate plugin installed. The advantge of this method is that unlike 99% of the other methods, if the browser doesnt have javascript or cannot load the flash object the alternate content remains in the html, so accessibility is high. In other methods, javascript writes both the flash object and the alternate content to the document, but if javascript is disabled neither are accessible. Besides, it allows flash object to be optionally loaded once page has loaded. This is ideal for banners because it lets the rest of the page load before it.

Download FLACCESS (rar) or read the tutorial and the update

Table of Contents from titles (TOC)

This script reads all nodes in a document and stores the titles hierarchic structure in a variable, showing them in an indented list according to their order. Sections of the list are links to the real section on the page, using the id of the titles (script creates them if needed).

Download toc

Form validator

This script reads all text fields of a form making all "required" classes having to be filled before sent to server, otherwise warning visually and through an alert. If the field is named email it forces (with a regular expression) to use a valid email.

Download validador

Bookmarklets

Definition

Bookmarklets are small scripts saved in your favorites (bookmarks) to execute routine actions in pages you view, extract data, perform searches on selected words, change the appearence of a page, etc. In our bookmarklets I cheat a little bit to being able to add more than 256 characters, avoid the use of void(0) and provide always the most updated version: adding the script to the page with document.createElement('script'), always calling the script stored in this server.

Examples

Indented list of nodes in a page

It can be used to check the correct markup (the semantics, to be more precise) of a page without using the DOM inspector, where you need to expand the nodes one by one.

Execute indented list of nodes

Objects, external CSS and javascript list

The script opens a window showing a list to all objects, javascript and css files of the page (and any frame page too if any). You only have to follow the links in the list to check source code or play movies.

Execute objects, external CSS and javascript list

Node path to element

Once initialized, the script expects you to click in the page and then opens a popup showing the node path to the element we clicked on.

Execute node path to element

Execute (one use only) node path to element

Computed styles of an element

Once initialized, the script expects you to click in the page and then opens a popup showing the node path to the element we clicked on and a list of all computed styles for that element.

Execute computed styles of an element

Execute (one use only) computed styles of an element

Computed styles of an element (II): mouseover

Same as above but also shows, in status bar, the path to the elements we move our mouse over.

Execute computed styles of an element with mouseover

Execute (one use only) computed styles of an element with mouseover

Use only user stylesheet

This script disables all stylesheets in a page and opens a window to ask for a user stylesheet. In Mozilla based browsers, if this stylesheet is local it will not be loaded for security reasons, but it does if you provide a web located stylesheet. Explorer does not have this restriction.

Execute use only user stylesheet

Enlarge your ... textareas

This script increases the size of all textarea in a page (or inner pages if inside a frameset) to 450px x 250px.

Execute enlarge your ... textareas