An Introduction to Dynamic HTML (DHTML)

Lights! Camera!

Armed with the understanding of positioned content blocks, and the ability to manipulate their characteristics via JavaScript, you basically need only to rely on your imagination (although JavaScript skill can certainly help). Consider some nifty uses of dynamic positioning:

• Animation: images contained in a positioned block can be moved around the page following a certain path.
  
  
• Drop-down menus: modifying clipping regions allows you to show or hide portions of a content block. To create a drop down menu, you would initially show only the top strip of the block containing the menu choices. When the user triggers the menu to drop, you chance the clipping region to display the vertical length of the menu chosen. We'll look at triggers from user events later in this article.
  
  
• Content-swapping: by positioning multiple blocks of content at the same spot on the page, yet keeping all but one block invisible, you can quickly swap a new block of content into place by changing their visibility properties. Alternatively, by keeping two overlapped blocks visible, you can modify their clipping regions in such a pattern as to produce a "transition" effect.

If all this sounds daunting, the real work is in the JavaScript code. The properties above make it clear how you can modify content blocks, but it is the JavaScript coding which performs these modifications, sometimes requiring complex loops to yield complex effects.

Dynamic Styles

As we've seen, positioning a content block is a form of style sheet. However, there are other uses for style sheets aside from placing blocks on the page. Style sheets (aka Cascading Style Sheets or CSS) can be used to define any set of styles which may apply to certain HTML elements or block of HTML. Like JavaScript, Cascading Style Sheets are their own in-depth web authoring topic. Because our focus is on DHTML, insofar as it uses and combines web authoring technologies, this isn't the place for a detailed tutorial on creating styles or style sheets. [ED: Links to a CSS tutorial?]

In brief, there are several ways to apply styles using style sheets. You can define styles which apply globally to all HTML elements of a certain type. For instance, you might create a style sheet which specifies that all <H3> elements be bold (font-weight) and red (color).

You may also define style "classes," which are predefined styles applied to an element on-demand. For example, you might specify that the style class "redbold" contains the styles bold (font-weight) and red (color). This redbold class would only apply to elements in which you demand it; e.g. <BLOCKQUOTE CLASS=redbold>.

Lastly, as you've already seen, you can define and apply styles on-the-fly, using the STYLE attribute for an element tag; e.g. <H4 STYLE="color:red; font-weight:bold;">. These on-the-fly styles apply only to the tag in which they are specified.

Both Microsoft and Netscape support CSS as described above, although Microsoft supports additional style properties which do not exist under Netscape. The critical difference between the browsers, however, is the degree to which their CSS support is dynamic.

Quasi-Dynamic HTML

The style sheet determines how, aesthetically, the document is rendered on the screen. Once rendered, though, can these styles be modified on-screen? This is where the two browsers diverge markedly.

Within Microsoft's Internet Explorer, you can, via JavaScript, modify many of the properties of a style sheet or an element's individual style. These changes will be immediately reflected on-screen -- so, if you changed the redbold class's color property to blue, any on-screen text using the redbold class will suddenly change to blue. Similarly, you can change any style property for those elements which possess inline ("on-the-fly") styles.

Netscape, on the other hand, is not so accomodating. While there is an interface to style sheets via JavaScript (albeit very different from the Microsoft implementation), you can only use JavaScript to define styles before they are rendered. By and large, this would be used as a slightly more flexible replacement for definining your styles rather than using standard CSS syntax. On the other hand, using standard CSS syntax would maintain compatibility between browsers. For this reason, it could be argued that Netscape's support for CSS via JavaScript is not terribly useful, and not at all dynamic, since changes applied to styles once the page has been rendered do not appear on-screen.

Stuck in the middle are we -- but because Microsoft's support for style modifications is far more robust, we will focus here on dynamic styles in MSIE. These concepts will apply to Netscape 5, based on Mozilla, whenever it finally arives, although the exact syntax may differ.

Inline Styles

Speaking non-strictly, we can say that an "inline style" is a style which applies only to an individual element rather than all elements of a certain type or class. Typically, an inline style is defined using the STYLE attribute for the element's tag; e.g. <H2 STYLE="color:blue">.

Within MSIE, then, you can use JavaScript to modify an inline style at any time. The modification will take effect on-screen immediately. You do this using the Style Object, which we looked at earlier with Dynamic Positioning. The Style Object in MSIE's DOM supports every property which CSS supports for styles. However, the property names differ slightly between CSS syntax and DOM syntax. Fortunately, the naming differences follow a rule. Consider the CSS property font-weight. The corresponding Style Object property is named fontWeight. Similarly, the CSS property text-align maps to the Style Object property textAlign. Of course, color retains the same name in both syntaxes. As you can see, then, CSS property names simply lose their hyphen and capitalize the first letter following the hyphen when used in JavaScript syntax.

So, then, confusing though that might sound, let's look at an example which illustrates just how easy changing styles can be. Imagine that you have the following HTML element:

<P ID="selectrule" ALIGN="left" STYLE="color:blue; font-weight:normal;">
Please select one item below.
</P>

Now, some series of events occur and the user fails to follow instructions. So, you'd like to emphasize the exhortation:

document.all["selectrule"].style.color="red";
document.all["selectrule"].style.fontWeight="bold";

When the above statements are executed, the text associated with the element named selectrule will become red and bold. Of course, you can set the element back to its original state by setting color back to "blue" and fontWeight back to "normal".

Notice that our JavaScript statements are modifying the styles directly associated with the particular element. You can always do this, even if the element's style wasn't defined inline, but was inherited from a class or global style sheet. No matter how the element gained its original style, whether inline or by style sheet, directly modifying the style in the above manner only applies to the individual element. For this reason, this form of JavaScript dynamic styles is always an inline style.