Tutorial 5 - DHTML and DOM
Dynamic HTML (DHTML) is a collection of strategies (scripting, CSS and DOM) that lets you create web pages that are more interactive, responsive and animated. The W3 Consortium document object model (DOM) extends script access to virtually every HTML element using objects as the modeling paradigm. Scripting languages can dynamically modify the look of a page as they react to events. w3schools.com offers a great tutorial on the DOM model. QuirksMode.com gives details of variants. It is always a wise procedure to test any browser that your clients/viewers may use against the w3.org DOM support test.
Accessing Elements Using DOM
The procedure for setting up access to an element is:
- Establish appropriate property values for the element's class [CSS]
- Identify the element with a unique id attribute [HTML]
- Set a class group attribute for the element [HTML]
- Create an activating event that passes the identifier [HTML]
- Capture the element's object by using the DOM document.getElementById('idname') method [script]
- Work with the element's style, visibility, content or position [script]
Dynamic Style - Color & Font Changes
Events has already demonstrated how different images could be activated with onMouseOver and onMouseOut events. You can achieve a fade effect by choosing colors of successive shades and cycling through them. Our first example of fade is programmed with a increment function using a switch statement to select the next color. The onMouseOver event is used to trigger the event. You could also use an onclick event or better still an onLoad event and setTimeout() method.
Fading Color Test - Touch Me!
The JavaScript code for the fade function is:
The second version of fade uses a mathematical progression for the fadeout. It also automatically fades on a timer. You may want to reset the count or have a method for starting the fade another time.
For a more flexible fader check the source code for JR's Ultimate Fader. The user can pick both start and finish color as well as the number of steps in the fade effect. Routines to allow cycling or reverse cycling are included but not hardwired. The effect can also be redirected to any element that a programmer wishes to write for.
Instead of using color changes, you could do fontsize changes to achieve a zooming effect. Instead of using the switch to set the colors, you set siz="12pt"; etc. and then use the fontSize property. Note that CSS style properties with hyphens are changed when used as a JavaScript property. Drop the hyphen and capitalize the next word (eg. CSS margin-left becomes JavaScript marginLeft).
Font Change Test - Touch Me!
Dynamic Visibility - Collapsing Text
Using the display property of CSS, one can hide segments of content such as detailed descriptions or sub topics until needed. This adds clarity to the presentation. Collapsing tree menus is another application of the display property. The function expand() uses a pointer from the topic element clicked on to access and unhide its related subtopic element. The next click on the topic element rehides the subtopic. This could be expanded several levels if needed.
The XHTML component uses event triggers (in this case div) that are always visible but clickable (or mouseable). The onclick event calls the expand function for its related subtopic element. Sub elements must have an id attribute and are normally styled display:none to initially hide them.
The expand function toggles the display property for any referenced element. Note that a global state saver is not needed as this function can easily access the current state using a style property.
Dynamic Visibility - The <noscript> Issue
You should always write code that assumes that some users may not have JavaScript enabled browsers or have temporarily turned it off. This is part of the 'Be kind to ALL users' philosophy. HTML provided a noscript element specifically for this purpose but many browsers (such as Opera, SlimBrowser etc.) do not respect it when scripting is turned off. The workaround is to use a div with display styling. Write a simple function that turns the display property to none and call this function with the onload attribute of the body element.
The message between <div> and </div> will appear on a non-script enabled browser or one with scripting turned off.
Dynamic Content - Timed Sayings
Most elements use the innerHTML attribute to dynamically alter content. See accessing control contents for the special case of form control elements. An older method for dynamic writing of content often seen in internet articles and textbooks was document.write() but this is invalid for xml (and hence xhtml) documents. Quirksmode Blog indicates a possible continuing use for the document.write function.
An important use of dynamic content is to isolate repetitive or changing text to an external JavaScript file. Documents needing this material only require a pointer to the file and a specific element to contain it. Changes in content need not be copied to all referring documents. Adding audio demonstrates another example of dynamic text.
A simple example with a timer to cycle through several sayings shows the use of innerHTML for dynamic content insertion.
Dynamic Relocation - Page Timeout
The window.location object has an href property which can be set to an URL which will be jumped to. This URL reference can be local or to a new document and can be dynamically set in script. Jumps can be initiated by events (onclick or onmouseover), by using the system's date object, by using a timer or by browser sniffers (eg. skip page when browser does not support specific code on that page).
This example watches how long the page has been displayed and transfers to another page when timed out. The application is perfect for a static splash screen or a front 'intro' page. Be sure to use the onLoad event to initialize the timer function.
The setTimeout() function transfers control to the function pointed at by its its first parameter [page2] after a delay set by the second parameter [limit] (in milliseconds).