Web Focus: Animate Your Pages

HTML was designed primarily to define the basic structure of documents. Documents contained headings (<H1>, <H2>, etc.), paragraphs (<HP>), list items (<LI>), etc. Web browsers, such as Netscape and Internet Explorer could then display the document structure, with headers displayed in a large font, list items with bullets, etc.

HTML’s simplicity was instrumental in the Web’s early growth in popularity. Web pages could be produced very easily, since there was no need to master a complicated language. Authoring software could also be produced very easily, and indeed many authoring tools were written and often made available free-of-charge.

But HTML’s simplicity meant that Web pages were very limited in what they could do. It was not possible to provide the more interactive facilities which were available in other desktop tools we are familiar with.

Dynamic HTML [1] overcomes these limitations by providing an object model for HTML elements (and accompanying style sheets). The content of each HTML element is available to a programming language. The programming language can respond to end user events, such as moving the mouse over a heading, clicking on an element, etc. An action can then be applied to any of the HTML elements.

So, for example, all of the headings in a document can be clickable, providing simple outlining capability.

Like to see an example of Dynamic HTML? Well this article has been written in Dynamic HTML! If you are using a Web browser with full support, clicking on the heading in this article will cause the article body to collapse. Clicking on the article again will redisplay the article.

Figure 1 ilustrates this.

Figure 1a: Initial View of Article	Figure 1b: Article After Collapsing Two Headings

Figure 1a shows the original article. The cursor is moved across the first heading (the cursor incidentally changes shape to a pointing hand). Following a mouseclick, the article is then collapsed. The second section is then collapsed, leaving the display as illustrated in Figure 1b.

This example of Dynamic HTML is easily achieved. The following Javascript program is included in the HEAD of the document.

<SCRIPT LANGUAGE=“JavaScript”>
<!–
function ToggleVisibility(e)  {
  if (e.style.visibility == “hidden”) {
      e.style.visibility = “visible”;
} else {
      e.style.visibility = “hidden”
}
}
// STOP HIDING –>
</SCRIPT>
<SCRIPT LANGUAGE=“JavaScript”>
<!–
function toggleDisplay(e)  {
  if (e.style.display == “none”) {
      e.style.display = “”;
} else {
      e.style.display = “none”
}
}
// STOP HIDING –>
</SCRIPT>

Then each of the headings contains a definition for the cursor and an action to be carried out when the cursor is clicked, as shown below:

The text of the section to be hidden is defined using the <DIV> element as shown below:

When the cursor moves over the heading, the cursor changes shape to a hand (due to the STYLE=“cursor:hand” definition). When the mouse is clicked the toggleDisplay Javascript function is executed, which toggles the visibility attribute of the named division, between the values of hidden and visible and the display attribute between the values of none and empty.

This example of Dynamic HTML is backwards compatible. If you use an old browser the article will be displayed as normal, and clicking on a heading will have no effect.

Both Microsoft’s Internet Explorer version 4.0 and Netscape Communicator 4.0 claim to support Dynamic HTML. Unfortunately, Microsoft’s and Netscape’s implementations are not fully interoperable. In this case it seems that Netscape are failing to support the Dynamic HTML as currently being defined by the World Wide Web Consortium.

Netscape’s lack of support for the Dynamic HTML model being developed by W3C means, for example, that, in the example given in this article, if the article is displayed initially with the section text collapsed, it is not possible to expand it.

This article has given a simple example of how a dynamic effect can be layered onto an existing structured HTML resource. Although such simple effects can be achieved quite easily, it is not necessarily easy to ensure that Dynamic HTML is used in a backwards compatible.

A number of books and Web resources about Dynamic HTML are available including Microsoft’s Dynamic HTML tutorial [2] and Instant Dynamic HTML Programmer’s Reference - IE4 Edition [3].

References

[1] Document Object Model,
http://www.w3.org/DOM/

[2] Dynamic HTML,
http://www.microsoft.com/sitebuilder/workshop/author/dhtml/

[3] Instant Dynamic HTML Programmer’s Reference - IE4 Edition,
http://rapid.wrox.co.uk/books/0685

Author Details