Web Page Information: Web pages display a variety of different kinds of information, including text, graphics, music, video, 3D models and animations. Standard HTML treats this information as essentially static elements on a page. DHTML adds interactivity to pages by allowing elements to be manipulated on the fly.

Dynamic HTML (DHTML): DHTML is the interaction of several technologies, including HTML, Cascading Style Sheets (CSS), Scripting and the Document Object Model (DOM), to create web pages that are dynamic, i.e. pages with elements that change or respond to user input. DHTML allows attributes to be changed on the fly, objects to be moved on the page, and form data to be applied to other forms.

Dynamic HTML: CSS (and plain old HTML) is what you change, the DOM is what makes it changeable, and client-side scripting is what actually changes it.

IE transitions Puzzle Solar System

 

JavaScript and CSS: JavaScript combined with Cascading Style Sheets allows elements (including text and images) to be moved, displayed and hidden after a page loads. Elements can be placed precisely on a page and can be stacked over each other and manipulated independently like layers.

CSS: Cascading Style Sheets provide presentation and layout control of HTML elements. The "cascading" refers to the use of multiple style sheets in a single document and their ordering rules. CSS1: first version of W3C style sheet specification (1996) includes typeface, type size, leading, margins, kerning. CSS2: second version W3C of style sheet specification (1998) includes positioning and layering.

Style CSS (125H)

 

Layers: Layers as specified in CSS2 provide the means to dynamically control HTML elements. Layers are created with the <DIV> tag (in Explorer and Netscape) or <LAYER> tag (in Netscape only). Layers are self contained sections of a page which can be positioned, diplayed, hidden and manipulated. Layers can be thought of as sheets of film that can be arranged and stacked over each other. The main properties of layers or positional objects are:

Layer definitions can be placed in separate style sheets and referenced in the <DIV> tag with the ID attribute:

<STYLE TYPE="text/css">
#layerone {position: absolute; left: 100px; top: 75 px}
</STYLE>

<DIV ID="layerone">
... layer content ...
</DIV>

Layer definitions can be placed directly in the <DIV> tag with embedded style sheets:

<DIV ID="Layer1" style="position:absolute; left:100px; top:75px; width:230px; height:150px; z-index:1">
... layer content ...
</DIV>

absolute layers

 

CSS Review: Style sheets are composed of rules that specify formatting and layout of elements. Rules contain two parts: a selector and declarations (property and value). The selector identifies the HTML element and the declaration specifies the style to be applied to it.

selector {property: value}

The simplest type of selectors is an HTML element (e.g. H2, P, BODY). The following rule specifies that Heading 2 elements are red and sans serif:

H2 {color: red; font-family: sans-serif}

The class and id attribute selectors allow rules to be applied to groups or uniquely identified elements respectively. The main difference between them is that class is used for a number of elements and id is used for a single element.

/* A class selector */
.quote {font-size: 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 30px; margin-right: 30px}

/* An id selector */
#title {font-family: "Courier New", Courier, mono; font-size: 24px; border: solid}

A few more examples are below:

<STYLE TYPE="text/css">
<!--
/* tag styles*/
BODY {background-color: #CCCCCC; font-family: Arial, Helvetica, sans-serif}
H1 {color: red; font-weight: bold; font-size: 24pt}
/* a class style */
.warning {font-size: 16pt; color: yellow; font-style: italic}
/* a layer style */
#layerone{position: absolute; top: 200; left: 200}
-->
</STYLE>

There are three methods of using style sheets in an HTML document: Inline, Embedded and External.

Making Layers: Using layers for DHTML entails defining styles for them and creating layer elements. Layers are defined with the <DIV> tag and positioning (absolute or relative). Absolute positioning allows a layer to be placed anywhere in the window by specifying LEFT and TOP values relative to the upper-left corner which is at 0,0. Other properties that can be specified for layers are HEIGHTand WIDTH, Z-INDEX (stacking order, higher numbers are above) and VISIBILITY (hidden or visible).

<STYLE TYPE="text/css">
<!--
/* style definition for layer1 */
#layer1 {
position: absolute;
visibility: visible;
top: 100;
left: 100;
z-index: 1000;
}
-->
</STYLE>

<DIV ID="layer1">
... layer content ...
</DIV>

example 1 example 2

 

Accessing Elements: One method to access web page elements and to change their properties is to use the document.getElementById ("objId") method supported by DOM2 compliant browsers. The "objId" is usually specified in the division (e.g. <DIV id="partA">). Style properties can be changes by assigning them new values (e.g. document.getElementById("objId").style.backgroundColor="#336699"). A few common properties are shown below:

document.getElementById("objId").style.backgroundColor
document.getElementById("objId").style.height
document.getElementById("objId").style.width
document.getElementById("objId").style.top
document.getElementById("objId").style.left
document.getElementById("objId").style.visibility

Manipulating: Layers can be manipulated after a page is loaded by using JavaScript and DOM to change their attributes. For example, a layer can be moved by changing the LEFT and TOP settings, a layer can be turned off or on by changing the VISIBILITY setting, a layer can be placed above or below another by setting the ZINDEX. A layer can be animated by using JavaScript to incrementally move it. The first row of examples below uses DOM2 and should work with current browsers, the second row is for version 4 browsers.

positiondom2 visibility1dom2 visibility2dom2 stackingdom2

 

position visibility1 visibility2 stacking IE animation NN animation

 

Animation: The following examples from JavaScript: Concepts &Techniques by Tina McDuffie show the process of creating a simple animation using JavaScript and CSS positioned elements. Divisions creates the divisions containing images using <DIV>, layers turns the divisions into absolutely positioned elements (layers), moving uses a JavaScript function to change an object's posiiton, and animation adds a function to automatically change an objec't position.

divisions layers moving animation

 

Browser Support: DHTML is supported only on 4.0 and later browsers. It is implemented very differently in Netscape and Explorer and across platforms. Many of the differences are due to their incompatible implementations of the Document Object Model. In Netscape positional objects are referred to as "layers," in Explorer they are referred to as "styles." Current versions of browsers are becoming more DOM2 compliant.

Following are examples of differences between Netscape 4 and Explorer 4 in object references for layer attributes:

<!-- Netscape -->
document.layerID.left = 200
document.layerID.top = 300
document.layerID.visibility = "visible"
document.layerID.zIndex = "2"

<!-- Explorer -->
document.all.layerID.style.left = 200
document.all.layerID.style.top = 300
document.all.layerID.style.visibility="hidden"
document.all.layerID.style.zIndex="100"

One solution is to use a browser detection script to execute appropriate JavaScript code for each browser:

<SCRIPT LANGUAGE="JavaScript">
<!--
// detect browser
var isNC, isIE
if ( navigator.appName == "Microsoft Internet Explorer" ) {
  isIE = true;
}
if ( navigator.appName == "Netscape" ) {
  isNC = true;
}

// Moves image layer to specified position
function move(leftval, topval){
if (isIE) {  //Explorer
  document.all.image1.style.left = leftval; 
  document.all.image1.style.top = topval;
}

if (isNC) {  //Netscpe
  document.image1.left = leftval; 
  document.image1.top = topval;
}
}

// Hides or shows image layer
function hideshow(vis){
if (isIE) //Explorer
  document.all.image1.style.visibility=vis;
if (isNC) //Netscape
  document.layers.image1.visibility=vis;
}
//-->
</SCRIPT>

Another method is to use object detection to test whether a particular object is supported by the browser. The following example uses three forks to determine if the browser is W3C complaint (NN6+, IE5+, Opera4+), Netscape 4 or Explorer 4:

// object support forking
function detectObject()
if (document.getElementById) { 

  //W3C complaint code

} else if (document.layers) { 

  //NN4 code

} else if (document.all) {  

  //IE44 code

}