Tutorial 7 - DHTML
Dynamic HTML (DHTML) is a collection of strategies (scripting, CSS and DOM) that creates web pages that are more interactive, responsive and animated. DHTML can be used to add interaction controls that are missing in HTML.
Dynamic Visibility: Collapsing Text
Using the CSS display property, 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
The message between <div> and </div> will appear on a non-script enabled browser or one with scripting turned off.
Dynamic Style: Color & Font Changes
A fade effect can be made by choosing colors of successive shades and cycling through them using the onmouseover event. The first example of fade is programmed with a increment function using a switch statement to select the next color. You could also use an onclick event or better still an onLoad event and setTimeout() method.
Fading Color Test - Touch Me!
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.
Font Change Test - Touch Me!
Dynamic Content: Timed Sayings
Most elements use the innerHTML property to dynamically alter content. See accessing control contents for the special case of form control elements. An older method for dynamic writing of content was document.write() but that method should be avoided.
An example with a timer cycling through several sayings shows the use of innerHTML for dynamic content insertion:
Hiding Embedded Elements
<embed src="canyon.mid" hidden="true" loop="true" autostart="true"></embed>
Printing a Page or Element
Printing the current page starts either with a link whose href calls the window.print() method or an input control with a similar action.
CSS style uses a function that hides the display of unwanted objects and then prints the page. After printing, the hidden objects are redisplayed.
The pure CSS method uses an @media construction. The example hides the menu header and the table of contents foooter in these tutorial pages.
Adding Custom Controls