Skip to Content

Web Focus: Animate Your Pages

Printer-friendly versionPrinter-friendly versionSend to friendSend to friend

Brian Kelly gives an introduction to Dynamic HTML, explaining recent developments that enable dynamic web pages to be produced using simple scripting languages such as Javascript.

Background to HTML

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

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.

Example

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.

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

How is this done?

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:

<H2 STYLE="cursor:hand" onclick="toggleDisplay(sect4);">Limitations</H2>

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

<DIV ID="sect4" STYLE="display: visible"> ... <DIV>

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.

Limitations

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.

Conclusions

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

Brian Kelly
UK Web Focus
UKOLN, University of Bath,
Bath, BA2 7AY
Email: B.Kelly@ukoln.ac.uk
UKOLN Web Site: http://www.ukoln.ac.uk/
Tel: 01225 323943

 

Date published: 
19 March 1998

This article has been published under copyright; please see our access terms and copyright guidance regarding use of content from this article. See also our explanations of how to cite Ariadne articles for examples of bibliographic format.

How to cite this article

Brian Kelly. "Web Focus: Animate Your Pages". March 1998, Ariadne Issue 14 http://www.ariadne.ac.uk/issue14/web-focus/


article | by Dr. Radut