Tutorial 6 - 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 also 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
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 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 font-size becomes JavaScript fontSize).
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 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() method.
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.
A simple example with a timer to cycle through several sayings shows the use of innerHTML for dynamic content insertion.
Hiding An Embed Element
<embed src="canyon.mid" hidden="true" loop="true" autostart="true"></embed>
The quick and dirty method for adding audio is the embed element but it (as well as bgsound) is not acceptable within the current w3.org recommendation and validators will complain. There is a sneaky solution using JavaScript which also allows a great deal of flexibility to be added. Dynamic content can include the embed element! By providing an empty div element in the body and an onload function to insert the embedded sound object, the document will verify but still plays media.
Printing a Page or Element
Printing the current page starts with a link whose href calls the window.print() method to do the actual printing.
But what if you only want to print a single element on the page such as an image or perhaps the entire page but minus the print link/button. Three solutions exist; CSS style, dynamic page creation and @media (pure CSS - no Javascript).
CSS style uses a function that hides the display of unwanted objects and then prints the page. After printing, the hidden objects are redisplayed. This method works in all browsers.
A dynamic page uses a function that creates a new page using window.open() and DHTML, writes the desired element and then prints the new page. This method is less suitable as it fails on some browsers and the document.write() method is no longer in favour.
Note: obj.print() does not work in Opera browser.
Beware: innerHTML reads static values of controls in
FireFox/Opera/Safari and dynamic values in IE-engined browsers.
The pure CSS method uses an @media construction.
Adding New Form Controls
Control widgets that have been forgotten by html developers can be easily added using a combination of CSS and Javascript (ie DHTML). The easiest to implement are progress bars and sliders. Spinners and throbbers are also available. Google javascript progress bar or javascript slider for examples!