Untitled Document

An Introduction to Dynamic HTML
K. Yue copyright 2000
October 20, 2000

Introduction

Dynamic HTML is an extension to HTML that allows dynamic manipulation of HTML elements through the use of scripting languages.
Netscape and Internet Explorer have their own versions of DHTML, mainly by supporting different DOM (Document Object Model).
Require version 4.0+ browsers.

Browser Sniffing

Browser sniffing is the main technique for solving browser incompatibility in dynamic HTML.
Browser detection is done by using the built-in object navigator in DOM.

Example:

navigator.html

Sample output in Netscape:

navigator.userAgent: Mozilla/4.72 [en] (Windows NT 5.0; U)
navigator.appCodeName: Mozilla
navigator.appVersion: 4.72 [en] (Windows NT 5.0; U)
navigator.appName: Netscape
navigator.language: en
navigator.platform: Win32
navigator.securityPolicy: US & CA domestic policy
navigator.plugins: [object PluginArray]
navigator.mimeTypes: [object MimeTypeArray]

Functions can be written to detect the browser.

Example:

function isNetscape() {
   // get browser info.
   appName = navigator.appName;
   appVer = navigator.appVersion.substring(0, 1);

   // check for Navigator ver 4+.
   if ((appName == "Netscape") && (appVer >= 4)) return true;
   return false;
}

function isIE() {
   // get browser info.
   appName = navigator.appName;
   appVer = navigator.appVersion.substring(0, 1);
   // check for IE ver 4+.
   if ((appName == "Microsoft Internet Explorer") && (appVer >= 4))
       return    true;
   return false;
}

Alternatively, you may use:

if (document.layers) {
// Netscape code
} else if (document.all) {
// IE code.
}

Element References

DHTML supports the manipulation of HTML elements as objects
The simplest method to be able to refer to HTML elements is by assigning ID to the element.
The tags <div> and <span> are frequently used to hold the ID attribute.
In Netscape:
- Create the tag using: <div id="abc" style="position:absolute"> or <div id="abc" style="position:absolute"> (or the <span> tag)
- Access the element using: document.layers["abc"].
- Note that the style position must be included. This is because the layer object is created by the <layer> and <ilayer> tags, which are equivalent to the <div> or <span> tags with positioning style.
In IE:
- Create the tag using: <div id="abc">.
- Access the element using document.all["abc"].

<div id="hello" style="position:relative">Hello</div>
...
<script language="Javascript">

</script>

In Netscape, there is a built-in Layer object in the document object for every layer and ilayer tags.
In IE,
- the all member collections of document contains one element per HTML element.
- the style member of an element represents the current settings of all its possible inline styles.

<body onload="position_at_top();expand()">
<div style="position:absolute" id="test"></div>

<script>
//Change the message below
var themessage="CSCI 4230 Software Tools";
var fontsize=10;
var appearfor=3000;

function position_at_top() {
   if (document.layers)
      document.test.top=pageYOffset;
   else if (document.all) {
      test.innerHTML='<div align=center><font ' +
                     ' face="Arial">'+themessage+'</font></div>';
      setTimeout("test.style.top=document.body.scrollTop",100);
   }
}

function expand() {
   if (document.layers){
      document.test.document.write('<div align=center style="' +
          'font-size:'+fontsize+'px"><font face="Arial">'           +themessage+'</font></div>');
   document.test.document.close();
}
else if (document.all) {
   test.style.fontSize=fontsize+'px';
}
fontsize+=5;
if (fontsize>90) {
   if (document.layers)
      setTimeout("document.test.visibility='hide'",appearfor);
   else if (document.all)
      setTimeout("test.style.visibility='hidden'",appearfor);
   return;
}
else
   setTimeout("expand()",50)
}
</script>
</body>

Event Handling

User-activated or system-activated events can be used to trigger Javascript action to change any element style.
Event handling in Javascript has been discussed in module 4 of Javascript's notes.

Example:

User changes background color.

<html>
<head>
<script language = "Javascript">

</script>
</head>
<body onLoad="startUp();">
<h1>Hello, world.</h1>
</script>
</body>
</html>

Example:

Image changes when mouse is on top.

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<p>
Here is an image for links:
<p>
<a href="links.html"
   onmouseover="if (sufficientVersion)                 document['links'].src=linksOverImage.src"
   onmouseout="if (sufficientVersion)
                document['links'].src=linksImage.src"
><img src="links.gif" width="140" height="60" border="0"
           alt="Links" name="links"></a>
<br>
</body>
</html>

Example:

fish.html (Netscape version)

<HTML>
<HEAD>
<TITLE>Swimming Fish</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<LAYER NAME="bluepole" LEFT=160 TOP=150>
<IMG SRC=bluepole.gif>
</LAYER>

<LAYER NAME="greenpole" LEFT=360 TOP=150>
<IMG SRC=greenpol.gif>
</LAYER>

<LAYER NAME="redpole" LEFT=260 TOP=150>
<IMG SRC=redpole.gif>
</LAYER>

<LAYER NAME="fish" LEFT=40 TOP=170 ABOVE="redpole">
<IMG SRC=fish1.gif >
</LAYER>

<SCRIPT>

function movefish() {
var fish = document.layers["fish"];
if (fish.left < 400) {
fish.offset(5, 0);}
else {fish.left = 10;}

setTimeout("movefish()", 10);
return;
}
</SCRIPT>

<H1>Fish Example 1</H1>
<FORM>
<INPUT type=button value="Move the fish"
OnClick="movefish(); return false;">
</FORM>

<P>
(This demonstration requires Netscape Navigator 4.0
or later.)

</BODY>
</HTML>