Explore Creativity and Control With Dynamic HTML
Adapted from article by William R. Stanek in PC Magazine, January 20, 1998

Dynamic HTML lets Web authors do more--and do it more precisely--than ever before.

To remain static on the Web is to court obsolescence. Not only do we expect sites to change daily, but we also expect them to provide ever-increasing levels of interactivity, along with special effects that rival the most sophisticated PowerPoint presentations. And we expect a constant flow of new and better technologies to supply the means. Dynamic HTML is the latest of these technologies and promises to enhance the design and capabilities of our Web pages. As has become familiar in the Internet arena, however, the two major players, Microsoft Corp. and Netscape Communications Corp., have developed separate and entirely different versions of the technology. As a result, your wonderful dynamic Web site may work with one browser but not the other.

So as a Web publisher, what do you do? Do you choose one version of dynamic HTML over the other? Or is there a way to create dynamic pages that will work with Microsoft Internet Explorer and Netscape Navigator? To help you decide, we will look at both companies' versions of dynamic HTML with an eye to creating dynamic pages that will work with both browsers.

With dynamic HTML, you can create Web pages with eye-popping special effects, animation, and much more without relying on server-side scripts, database engines, or hundreds of lines of complicated markup code. One of the key design goals in creating dynamic HTML was easing the complexities involved in interactive multimedia presentations on the Web. An important part of that goal was building the necessary support framework into the browser, which is exactly what Microsoft and Netscape did with Version 4.0 of their respective browsers. The result is that you don't have to rely on ActiveX controls, Netscape plug-ins, or other helper applications to achieve special effects, animation, or anything else that dynamic HTML enables.

Dynamic content is not entirely new with the new browser versions. Client and server applications have supported dynamic content for some time now. If you use any of Microsoft's Active servers, such as the Internet Information Server, you can use active server pages to tailor your content to the needs of individual users. Similarly, Netscape's Enterprise or FastTrack servers let you use server-side scripting to individualize content. Both companies' technologies also allow you to use client-side scripts to create highly interactive dynamic pages. The scripts could be written in JavaScript, JScript, or VBScript, depending on the client browser you are developing for.

What these and other solutions for creating dynamic content have in common is complexity. To create dazzling Web pages full of bells and whistles, you need to perform some pretty virtuosic programming feats. Thanks to dynamic HTML, you can create the same Web pages with minimal coding. A page that uses dynamic HTML to make live updates doesn't look much different than its static counterpart, but achieving the same effect with server-side scripting would be a noteworthy feat.

The key to dynamic HTML in both Internet Explorer and Navigator is a live update mechanism that allows a browser to modify sections of a Web page in the background. Once the page has been modified, the browser reformats it as necessary and displays the changes. Anyone viewing the page sees the updates instantly and doesn't have to wait for the browser to reload the page or access another page. The browser makes the changes without ever having to go back to the Web server for additional content.

Live updates can be triggered by user- and browser-driven events as well as by timers. Whenever a user moves the mouse over an element in a Web page or clicks on a button, an event is triggered that can be handled by dynamic HTML. Browser-driven events are triggered by internal actions, such as when the browser finishes downloading the Web page. With timers, you use a script or a live media feed to update content on the page.

Of course, events and timers aren't new with dynamic HTML. What's new is how they are handled. Instead of relying on Java applets, ActiveX controls, or Netscape plug-ins, the browser can handle the live updates directly. That said, both Microsoft and Netscape are quick to point out that dynamic HTML can be used with embedded objects, which ideally you would use to manipulate dynamic HTML in ways that can't be handled directly by the browser, or to perform other complex tasks.

Two Approaches: Microsoft and Netscape
Unlike tables, frames, and other recent Web page innovations, Microsoft's dynamic HTML doesn't focus on new tags and complex markup. One of the overriding design considerations for Microsoft was to make dynamic HTML a natural extension of existing technologies, allowing Web publishers to do more and go further with the tools they already have. Because of this, Microsoft dynamic HTML is easy to learn and use.

Microsoft's dynamic HTML is implemented as an extension of the Internet Explorer object model and is available only in Version 4.0 or later. The Internet Explorer object model provides the core functionality of the browser and is separate from the object models for scripting, ActiveX, and Java, which allows Microsoft to add functionality to the browser yet easily maintain compatibility between existing frameworks. That approach is the reason you can readily manipulate the features of dynamic HTML using applets, controls, and scripts, for which you'd likely use JScript. In a way, Microsoft's dynamic HTML is a scriptable combination of HTML and Cascading Style Sheets (CSS). For example, you can use JScript to change dynamically the contents of any HTML element in a Web page. You can also use JScript to change dynamically the style associated with any element in a Web page.

In short, Microsoft's implementation has focused on adding functionality to the browser through HTML and CSS extensions. But that's not all there is to it. In a head-to-head comparison, you will find quite a few innovations that are quite remarkable.

Netscape's dynamic HTML is also powerful, but it is implemented in a very different way involving a combination of new HTML tags, scripting extensions, and style-sheet extras. The focus is on new ways of doing things rather than extending existing technologies, so there are usually several different ways to implement the same functionality. Beginners may find that confusing, but more experienced Web publishers will likely welcome the opportunity to choose their own path.

As you set out to work with Netscape's dynamic HTML, keep in mind the enhancements are available only in Navigator 4.0 or later. Because dynamic HTML extends the browser object model, it is possible to use it with Java applets and Netscape plug-ins, though your primary means of working with the technology is through JavaScript. New JavaScript features even allow you to define style sheets using a JavaScript syntax.

A Head-to-Head Comparison
While Internet Explorer and Navigator implement dynamic HTML in different ways, there are places where the technologies converge. As I dissected both companies' implementations for this article, I came up with a list of seven innovations that the combined technologies offer:

As we discuss them, I'll present four examples that illustrate some of the points. Click on "live examples" on the left to see the examples in action, or click on "code examples" to see the HTML.

Dynamic content and style changes
Dynamic content and style extensions allow you to change the content and appearance of a Web page after it is loaded. Because all elements in the Web page are scriptable with user- and browser-driven events, you can make every element in the page interactive. Users could click on a table header cell, for example, to get more detailed information, or they could move the pointer over a quotation to highlight it.

Microsoft takes the concept of dynamic content and style changes a step further by letting you completely replace elements on a Web page using a JScript method called outerHTML, which tells JScript to replace the element and its contents entirely. There's also a related method, innerHTML, which lets you replace the contents of an element.

Example 1 shows how you can replace elements in Internet Explorer. When you move the pointer over the text "See my e-mail address," the text is replaced with an address element that contains an actual e-mail address. Note the use of outerHTML to replace the paragraph element with the address element.

Netscape takes a much different approach to style and content changes. You can create and manipulate styles using the syntax defined in the Cascading Style Sheets Level 1 specification and in Netscape's own JavaScript syntax. (The special JavaScript syntax is one of the reasons Netscape's dynamic HTML may be confusing for beginners.)

Navigator allows you to use a traditional style sheet, like this:

<STYLE TYPE="text/css">
H1 { font-style: italic;
font-size: 25 pt;
color: blue
}
</STYLE>

Navigator also allows you to use a JavaScript style sheet, like this:

<STYLE TYPE="text/javascript">
tags.H1.fontStyle =
"italic"
tags.H1.fontSize = "25 pt"
tags.H1.color = "blue"
</STYLE>

When you compare the code samples, you will note several important differences in the second sample. The TYPE attribute references the JavaScript syntax instead of the CSS syntax. Styles are referenced via the tags object and their unique designators. (To extract a designator for any HTML element, remove the <> symbols from the element's begin tag.)

Note also the way CSS attributes are converted to JavaScript properties. While one-word attributes generally have identical property names, multiple-word attributes are combined by removing the hyphens between words and capitalizing the first letters of the second and successive words. For example, the color CSS attribute has a related color property, but the font-size CSS attribute becomes the fontSize property (as shown in the previous code sample).

It's probably a good idea to forget about the JavaScript style-sheet syntax and focus instead on the facts that styles can be manipulated through JavaScript and that CSS attributes are available as JavaScript properties, which together allow you to script dynamic styles in much the same way as you would with Microsoft's dynamic HTML.

Example 2 shows how you can dynamically change the style of an element within a Web page. Initially, the division element has a red background. When you move the pointer over the division, the background turns yellow. When you move the pointer away, the background turns green. Using similar techniques, you can also update content within a page dynamically.

Element Positioning and Animation
The positioning extensions for CSS allow you to place an element precisely on the screen by assigning the element specific x- and y-coordinates. Because you can assign a coordinate on the z-plane, you can also stack elements on top of each other. For example, you can place an image behind any type of text element by assigning it the same screen position and giving it a lower index on the

z-plane.

While valid z-index ranges for Internet Explorer include positive and negative integers, Navigator z-indexes must be 0 or a positive integer. The z-index of normal page elements is 0. Give a table a z-index of 1 and it will seem to float above other elements on the page. By making the table react to events, such as a mouse click, you can provide a way for readers to fold the table away, revealing the elements behind it.

Similar techniques can be used to create an animation. When a user clicks on an element or moves the pointer over it, you can shift the element's position. Changing an element's position is as easy as changing its style or content. However, if you don't control the speed of the animation, your element may zip across the page at light speed. To slow things down, use a timer. Both Internet Explorer and Navigator support a timer method called setInterval, which has the following syntax:

setInterval("methodToCall", timeInterval)

where methodToCall is the actual method you want to call and timeInterval is the delay in milliseconds between method calls.

Figure 3 shows how you can use a timer in Internet Explorer. If you run the demo on the PC Magazine Web site, you'll see an image slide across the browser window. Because the image's z-index is set below other elements on the page, the image moves behind the header text. If you try to implement a similar animation in Navigator, you can't use a negative z-index, but there is a work-around--assign a higher z-index to the elements you want the image to float behind.

As you'll soon discover if you work with Microsoft's dynamic HTML, positioning and moving groups of elements is best handled by making the elements part of a page division or span, so that you can address the group of elements as a whole rather than having to deal with each individually.

Netscape, of course, handles this differently, introducing a new set of tags designed for manipulating blocks of content within your Web page. In Navigator, each group of elements you want to manipulate can be defined as a document layer. Layers can be positioned and sized just like any other element. By specifying different z-plane indexes, you can stack layers on top of each other and other elements. Layers can also be resized and moved using methods of the layer object.

Example 4 shows how you can create and animate a layer. Move the pointer over the layer and the layer shifts to the left. Take the pointer off the layer and the layer moves down. As you take a look at the code, note the use of the <LAYER> tag.

In many ways, Netscape layers may remind you of frames. That's because the two elements have a lot in common. Both layers and frames have a wide assortment of attributes and can be manipulated using properties and methods of their corresponding JavaScript objects. Just as there is a <NOFRAME> tag, there is also a <NOLAYER> tag, which can be used to define content for browsers that don't support layers. There's even an <ILAYER> tag used to define internal layers within a page. Despite the fact that this technology is complex and can be confusing, layers are one of the most compelling reasons to use Netscape's dynamic HTML.

Multimedia Effects
In the area of multimedia effects, Microsoft is the clear winner. Its dynamic HTML allows you to use special effects and transitions without ever having to write a script. Scriptless multimedia effects are possible because Internet Explorer supports filters that can be invoked as CSS properties. You can think of these filters as a set of preprogrammed behaviors you can apply to controllable elements in a Web page. Another name for a controllable element is an HTML control. With Internet Explorer 4.0, Microsoft has greatly expanded the available HTML controls, which now include images, marquees, input fields, buttons, text areas, tables, individual table elements, page divisions, and page spans.

If you have ever seen an animated GIF that faded a graphic image in and out and wished you could do that without the byte-hogging graphic, you will love the blend-transition filter. Using this filter, you can fade any controllable element. You can fade out an image simply by specifying the blend-transition filter in the image's style attribute. The following image will fade for 5 seconds:

<IMG ID="image1" SRC="sun.gif"
STYLE="filter: blendTrans (duration=5.0)">

Another cool filter is the reveal-transition filter. You can use this filter to create transitions both within pages and between pages. A transition within a page allows you to reveal or hide an image, table, or other controllable element. A transition between pages allows you to create a slide-show presentation as readers navigate through your Web site.

Other filters you'll want to use include a set of visual filters you can use to create a drop shadow for a button, flip an image, or make a table seem to glow. The table "Filters Available in Microsoft's Dynamic HTML" summarizes the available filters and their uses.

While the main reason to use filters is to reduce complexity and make pages load faster, you can easily combine multiple effects and transitions with scripts, and you can use filters with some ActiveX controls. The main thing to remember with filters is that they cannot be used with any elements or controls that run in their own window, such as an internal frame or a windowed control.

Unfortunately, there is no functional equivalent of Internet Explorer filters for Navigator. Although you could argue that similar effects and transitions can be accomplished through scripts, plug-ins, and applets, the amount of time and effort necessary to mimic these multimedia effects make the task too difficult for the average Web publisher.

Dynamic Fonts
With dynamic fonts, the idea is that you don't have to worry about whether a reader has a font you're using in your Web page. All you need to do is publish the source for a font at your Web site and insert markup into your Web page that tells the browser to download the font. When the page is accessed, the reader's browser retrieves the font and displays the page exactly as it was meant to be seen. Although the font is not permanently installed in the end user's computer, it is temporarily available for the specified Web page.

As you'll quickly discover if you delve into dynamic fonts, theory and practice are two different things. Dynamic fonts are not easy for novices to implement. Before doing anything, you may well need to install an authoring tool for creating font definition files based on the fonts installed on your computer. Generally, you use the tool to create a font definition file for each font family that you want to use as a dynamic font. Both Internet Explorer and Navigator provide support for dynamic fonts.

Data Binding
If you work with database records, or if you need to extract information from document files, you will want to take a close look at data binding, which is supported by Internet Explorer but not by Navigator. With data binding you can tie elements in your document to a data source. When the page is loaded, the current information from the data source can be read and dynamically inserted.

One way to use data binding would be to perform routine database searches. If you tally invoices every day and create a report summary from the results, you could use data binding to extract records from your database and automatically create a table based on the records. Once the records are stored in the table, you can filter and sort the data without ever having to go back to the database or the Web server.

Summing Up
Our comparison of the Microsoft's and Netscape's implementations of dynamic HTML reveals many differences between these technologies. In some ways, Microsoft's is clearly superior, especially when it comes to multimedia effects and data binding. Still, the versatility of Netscape's implementation, in particular unique features such as layers and JavaScript structured style sheets, should not be overlooked.

Ultimately, the dynamic HTML version you choose will depend largely on where and how you plan to use dynamic Web pages. If you are publishing on a corporate intranet, you may well be able to design your pages based on a particular browser. Beyond the intranet environment, you have no control over which browser is used to view your Web site. Creating cross-browser dynamic HTML pages is a tall order, because pages created for one browser won't work with the other. For the moment, the best idea may be to create dynamic HTML pages that won't cause problems in noncompliant browsers. Here are some pointers that may help.

<SCRIPT LANGUAGE="JavaScript">
if (navigator.userAgent.indexOf ("Mozilla/4.0") != -1) {
//execute version 4.0 code or calls
} else {
//perform non-version 4.0 code or calls
}
</SCRIPT>

Because the userAgent property of both Internet Explorer 4.0 and Navigator 4.0 contains the text Mozilla/4.0, both browsers will execute code specified in the if statement. To get Internet Explorer and Navigator to execute separate statements, you need to use the appName and appVersion properties:

<SCRIPT LANGUAGE="JavaScript">

if (navigator.appVersion.charAt(0)
== "4") {

if (navigator.appName ==
"Netscape") {
//perform Navigator version 4.0 code or calls
} else {
//perform Internet Explorer version 4.0 code or calls
}
}
</SCRIPT>

Now that you've divided and conquered, you can create dynamic pages that should work in both Internet Explorer and Navigator. Unfortunately, there's not a lot of common ground to exploit between the companies' technologies, so at this point you may well be coding everything twice. Still, dynamic HTML has a lot to offer, and the results will justify your efforts. If you are more patient, then HTML 5 may solve most of this dilemma.