Introduction to DHTML

Created 2/16/2003

Dynamic HTML
As discussed earlier DHTML is the combination of 3 browser technologies to render a dynamic browser experience
HTML for content Cascading Style Sheets for general presentation Javascript to enable dynamic presentation

In reality it is tapping into the richness of the browsers Document Object Model (DOM) using HTML, CSS and Javascript that is the key to a highly dynamic browser experience

Affect the DOM through

HTML (content)
Cascading Style Sheets (general presentation)

Browser DOM

Javascript (and other scripting languages) for most dynamic effects

Dynamic HTML
With Dynamic HTML the emphasis is on making the browser provide a richer viewing experience through effects like
Animation Filters Transitions

This is done by applying properties and methods of the Browsers Document Object Model (DOM) This is usually done through Javascript, but it can also be done by any scripting language supported by the browser, such as VB-Script

HTML 4.0 <iframe> tag

Allows you to create a window inside your web page to display another HTML file Syntax:
<iframe id=ID src=URL width=value height=value frameborder=yes|no> Height and width must be in pixels

CSS-P: Dynamic CSS

An extension of CSS-1 Stands for Cascading Style Sheet Positioning Eventually became part of CSS-2 Used to control the positioning of images and objects Expressed in Style Sheet Syntax

CSS-P Position
tag {position: absolute|relative|fixed|static; left: value; top: value}
left: position in relative or absolute units from left edge top: position in relative or absolute units from top edge absolute: position from top left corner of parent object relative: position in relation to where the browser would place it by default fixed: will not scroll static: this happens by default. The browser determines where to position an object based on natural flow

CSS-P Examples
Absolute:
<div id=1 style="position: absolute; left:100; top:100"> <h1>position: absolute; left:100; top:100</h1> </div>

Relative:
<div id=1 style="position: relative; left:2cm; top:0cm; border-style:dashed"> <h1>position: relative; left:2cm; top:0cm</h1> </div>

CSS-P Absolute Positioning

CSS-P Relative Positioning

CSS-P Layering Objects

If two objects overlap the object referenced last in the HTML code will overlay objects preceding it Can be overruled by using z-index
Specify z-index as an integer (positive or negative) The higher z-index values gets the foreground If two objects have the same z-index, the one appearing last in the HTML has the foreground

Syntax:
tag {zindex: <number> | auto}
number: any integer, positive, negative or zero auto: browser determines (default)

CSS-P z-index

Layering Example
Appears second

Appears first

<div id=1" style="position: absolute; left:100; top:100; background:pink; z-index:3"> <h1>z-index:3</h1> </div> <div id=2" style="position: absolute; left:50; top:50; background:silver; z-index:2"> <p><b>z-index:2</b> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p> </div> <div id=3" style="position: absolute; left:150; top:150; background:limegreen; z-index:1"> <h2><b>z-index:1</b> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</h2> </div>

Appears last

CSS-P visibility
Syntax:
tag {visibility: visible | inherit | hidden}
visible: item must be visible inherit: depends on the visibility of parent object
ex: if a <div> is hidden, all tags in the <div> are hidden this is the default

hidden: explicitly hide the object.

The object still takes up space, but content is not seen

Example:
<p style="visibility:hidden>This text is hidden</p>

CSS-P display:none
Used in conjunction with visibility:hidden Informs the browser to hide all space in the browser window needed for the object. Example:
<p style="visibility:hidden; display:none">An invisible and hidden object</p>

CSS-P Visibility

CSS-P Object width and height

Can be in absolute or relative units Use width or height attributes Examples:
<div id="1" style="width:100; height:300; background:pink"> <h1>100 x 300 pixel object</h1> </div> <div id="2" style="width:10em; height:5em; background:limegreen"> <h1>10em x 5em object</h1> </div>

CSS-P overflow
Specifies how to handle text overflow Syntax:
tag {overflow: visible | hidden | scroll | auto}
visible - increases size to display all the text hidden - text outside of specified height and width is not displayed scroll - adds vertical and horizontal scroll bars, even if unneeded auto - adds vertical and horizontal scroll bars only if needed

CSS-P overflow

CSS-P clip: rect

Used to display only a portion of an object Syntax:
tag {clip:rect (top,right,bottom,left)}
top, right, bottom, left specified in pixels

Must be used with absolute positioning

width and height attributes needed

Space for whole image is taken up

But only part of image is actually shown

Example:
<img src="steve.pg.jpg" style="position: absolute; left:0; top:500; clip: rect(125,414,399,210)" />

Browser Detection
Use navigator.appName
Typically returns Netscapeor Microsoft Internet Explorer

Ex:
document.write("<p>navigator.appName = "+navigator.appName+"<p>");

Browser Version Detection

Major Version:
parseInt(navigator.appVersion)
parseInt looks through a text string and returns the first integer it can find, if any

Full Version:
partFloat(navigator.appVersion)
parseFloat looks through a text string and returns the first floating number it can find, if any.

IE 5.0+ will return version 4, so this is of limited usefulness

DOM Type Detection

If you know the type of DOM your browser supports you can fine tune Javascript to match the DOM if (document.layers)
Since only Netscape 4.x supports layers, so the DOM is Netscape 4.x; however this code will normally cause a Javascript error today! Since Netscape 4.x is less than 3% of the browser market, it is best not to use this code.

if (document.all)
Since IE supports the all collection, it should be IE 4.x or greater compatible DOM Some browsers can fake out the browser type, e.g. Opera

if (!(document.all))
Probably Mozilla/Netscape 6+ or a W3C compliant DOM

Cross-Browser Code
Place this code in <head> before functions or in .js file
var isW3C = false; var isIE = false; if (!(document.all)) isW3C=true; /* standard compliant DOM, probably */ if (document.all) isIE=true;

Above code is not foolproof. There are lots of browsers out there but if you can live not supporting a small number of Netscape 4.x and other odd browsers this may be good enough Reference inNS and isIE as needed:
Ex:
if (isW3C) <code specifically for W3C Standard DOM>

Or use location.href to immediately load a page optimized for a particular DOM

Ex: if (isW3C)
location.href=myPageW3C.htm;

Cross Browser Strategies

DOM Problems
Each browser may extend or modify recommended ways of implementing a browser DOM
Internet Explorer is rife with features like filters and transitions that are unique but limit accessibility of the page to other browsers Other browsers, have similar problems The W3C has come up with a standard DOM that all browsers should implement
See http://www.w3.org/DOM/

Browsers are beginning to adhere to the W3C recommendations

W3C DOM Standard

IE 6+, Opera 7, and Mozilla/Netscape 7+ allow two modes of addressing their DOMs:
Quirk or Compatible Mode: this usually happens by default and includes all the browsers proprietary and nonstandard features Standard or Compliant Mode: implements the W3C standard

How to tell what DOM standards your browser can support?

W3C provides this handy link

W3C DOM Essential Ideas

Every document is a hierarchy that can be traversed Methods in the DOM allow nodes to be located, added, deleted and changed at will through an interface language such as Javascript A node represents a DOM object and usually has an HTML representation, ex: <p> or <img>
Link to a good tutorial (will show this page in class, if you did not attend class please study this page carefully)

Two fundamental entities in a DOM:

Element: often corresponds to an HTML tag, also a node Attribute: similar to an HTML attribute, but is really any property or method supported by the DOM

Enabling Standard Mode

The DOM Standard mode can be switched on with the proper XHTML statement at the top of the source file IE: (any of these will work, choose the type of XHTML document you want to produce):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Mozilla/Netscape: Usually turned on by default if you use validated XHMTL. Otherwise you may be placed into Quirk mode.

What to do now
W3C DOM standards will be widely adapted by all browser manufacturers over time
The problem right now is supporting older browsers, i.e. IE 5 or less, Netscape 4.

Recommendation: write to W3C standard DOM if possible. In time browsers will catch up If you must support older browsers you have options:
Consider using Flash & Shockwave technologies for dynamic presentation See if it is possible to standardize on a particular browser, such as IE 5 Write complex cross platform code as a last resort

W3C DOM-1
Document Object Model Level 1 It gives the scripting language easy access to the structure, content, and presentation of a document which is written in such languages as HTML and CSS. Compatible with future improvements in technology Allows any scripting language to interact with whatever languages are being used in the document
Typically Javascript is the interface

W3C DOM-1
Provides a standard set of objects for representing HTML and XML documents
Typically HTML objects are used, but XML documents will be more frequently used in the future

Two parts:
Core
Provides a low-level set of fundamental interfaces that can represent any structured document Defines extended interfaces for representing an XML document

HTML
Interfaces with Core Level 1 section to provide a more convenient view of an HTML document

For more information see http://www.w3.org/TR/RECDOM-Level-1/

W3C DOM-2
Consists of Core, Events, Style, Traversal and Range, and Views specifications. All build on top of DOM-1 Core Core:
Consists of interfaces to create and manipulate the structure and contents of a document Contains specialized interfaces dedicated to XML

Events: gives to programs and scripts a generic event system Style: allows programs and scripts to dynamically access and update the content and of style sheets documents

W3C DOM-2
Traversal and Range: Allow programs and scripts to dynamically traverse and identify a range of content in a document. Views: allows programs and scripts to dynamically access and update the content of a representation of a document

W3C: Accessing DOM-1Nodes

document.getElementsByTagName
This can be cumbersome Ex: var x = document.getElementsByTagName('B')[0]; // get first <b> tag on the page

document.getElementsByTagId
If you know the unique ID attribute to the tag, jump to it directly. Ex:
<p align="right">This is a <b id="hereweare">paragraph</b></p> var x = document.getElementById('hereweare');

W3C: Changing a Node

Elements cannot be changed, they can only be added or deleted
But you can change attributes of an element

Use the common setAttribute method for any DOM object. Example:
node = document.getElementById('hereweare); node.setAttribute('align',val);

W3C: Creating a Node

Find the place in the DOM hierarchy where you want the content to go.
Use techniques on the previous page

You can either create an element or add an attribute to an element Creating an element example:
var x = document.createElement('HR'); document.getElementById('inserthrhere').appendChild(x);

Adding an attribute to an element example:

node.setAttribute('align',val);

W3C: Removing a Node

Find the parent object of that which you want to remove:
x = document.getElementById(deleteID') y=x.parentNode;

Then execute a removeChild method on the parent node:

y.removeChild(x);