HTML Markup | JavaScript | Java | Home & Links

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.

Topic One
Topic Two

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 some browsers 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

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 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.

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 was document.write() but that method should be avoided.

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.

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>

The quick and dirty method for adding audio is the embed element but it (as well as bgsound) is not acceptable within the current recommendation and validators will complain. There is a sneaky solution using JavaScript which also adds a great deal of flexibility. 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 either with a link whose href calls the window.print() method or an input control with a similar action.

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. Two solutions exist; CSS style 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.

The pure CSS method uses an @media construction. The example hides the menu header and the table of contents foooter in these tutorial pages.

Control widgets that have been forgotten by html developers or special to an application 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! Some popular third-party libraries are listed in the toolbox article.

JR's HomePage | Comments [jstutor7.htm:2015 11 11]