Dynamic HTML

The Document Object Model   |  Dynamic Page Layout   |  Useful Links

Beginning with version 4.0 browsers, HTML code began supporting dynamic elements involving the interaction of three elements, the HTML code, cascading style sheets (CSS), and a scripting language. If a browser supports CSS, HTML and JavaScript, it also supports DHTML. DHTML has significant advantages, including fewer calls to the server, small file size, no plug-ins required, and ease of learning. A disadvantage of DHTML is the fact that it is not standardized. That portion of dynamic HTML that is supported by both major browsers is referred to as cross-browser DHTML.

The World Wide Web was founded with the premise that Web documents should be accessible irrespective of the platform or software used. Both Netscape and Microsoft introduced dynamic new technologies that are proprietary, rather than standard. A working group of the World Wide Web Consortium (W3C) is now established to set recommendations for an HTML document object model (DOM). Meanwhile, implementing dynamic HTML (DHTML) that works equally in major browsers is a challenge. Some features do not work on all platforms or with all operating systems.

The Document Object Model (DOM)  The DOM is a hierarchical mapping of the elements in a Web page. Any element defined with an identification by the DOM can be used in a JavaScript function. As a result the page can become active in response to actions by the user or programming written by the author. The DOM makes elements of a Web page available as objects for scripting. Dynamic HTML accesses the DOM using scripts. Almost every element that can be controlled by CSS can be handled with DHTML.

In the DOM hierarchy the document is the primary object, and it may contain a form, which may contain specific form elements. For a script to use an element or apply a property value, it must specify the hierarchical path to the element. Naming elements in the page with the id attribute provides a unique address for mapping the element, essentially converting it to an object. Not all elements are included in the DOM and different browsers have different element inclusions in their mapping. Applying an ID assures inclusion of the ID'ed element in the DOM, making it accessible to scripting and, therefore, to DHTML.

An object can be understood as an HTML element that has been defined with an ID, or in the case of an image, with a name. Names can be used for images. All other objects to be used should be identified with an ID. Such an object has a unique address in the DOM. To set up an object, add an ID rule to the style sheet, using the pound sign (#) signal character for IDs, and define the position as either absolute or relative. Then apply the ID to or with an HTML tag set, using the <div> </div> tags for absolutely positioned objects and the <span> </span> tags for relatively positioned objects. Positioning is dicussed below. The following sample illustrates the code.

<style type="text/css">

#objecta {position: absolute; }
#objectb {position: relative; }
</style> </head> <body>

<div id="objecta">Title</div>
<span id="objectb">Subtitle</span>

The DOM works by describing the path from a JavaScript function to an object in a document. Unfortunately, this path has to be described differently for different browsers and versions of browsers. The following table presents the DOMs used by various browsers to access the same object, a style declaration. Newer browsers that conform to the W3C standard will use the ID DOM.


JavaScript Function Path 

Netscape Layer DOM document.layers['myobject].class
Internet Explorer All DOM document.all['myobject'].style.class
W3C ID DOM document.getElementById('myobject').style.class

When animating objects it is important to know how each browser handles events, and to provide the appropriate code. To overcome the variation in browser support of code, the Web author can detect the version of the browser DOM and build a cross-browser DOM. This is accomplished by creating a JavaScript to detect the particular browser DOM used on the client computer. The following code determines which DOM the browser uses and assigns a true value (1) to the variable. This method is termed feature sensing.

Feature sensing is the recommended method of animating objects because browsers can change capabilities and fix bugs with new versions. You need to know whether or not a code will run in a specific browser, not what the brand name of the browser is. The following script returns true if the browser recognizes the function path syntax equated with the DOMs in the table above.

  var layer = 0;
  var all = 0;
  var id = 0;
if (document.getElementById) {id = 1;}
 else {
if (document.layers) {layer = 1;}
 else {
if (document.all) {all = 1;}
// -->

The following script determines the browser version and the software, rather than feature sensing. If the browser is version 4 or greater, that determination is made. If the version is not 4 or greater the browser is instructed to call the page "three.html." For version 4 or greater the browser calls "one.html" if the software is Netscape, or "two.html" if the software is Internet Explorer. Since the release of Netscape 6, the situation is more complex than this script supports.

<script language="JavaScript">   <!-- 
 if (parseInt(navigator.appVersion) >= 4)  {
 if (navigator.appName == "Netscape")  {
  window.location.href = "one.html"
} else if (navigator.appName.indexOf("Internet Explorer") != -1)  {
  window.location.href = "two.html"
} else {
  window.location.href = "three.html" 
} else {
  window.location.href = "three.html" 

The next script detects the browser type and version.

<script> <!-- 
var N4, E4
if (parseInt(navigator.appVersion) >= 4) {
N4 = (navigator.appName == "Netscape")
E4 = (navigator.appName.indexOf("Microsoft") != -1)

After the script determines which browser or DOM is in use several strategies are available. Page branching requires creating separate pages for each browser or DOM, and internal branching requires enclosing document sections in IF...Else statements in a script, to provide alternate code according to the version detected. A third strategy, application programming interface (API), involves creation of a separate file containing JavaScripting to resolve the cross-browser differences.

The following feature detection script can be used as an API. Functions with IF...ELSE clauses can be added to the API file as needed.

var dh = 0;
var layer = 0;
var all = 0;
var id = 0;

if (document.getElementById) {id = 1; dh = 1;}
 else {
if (document.all) {all = 1; dh = 1;}
 else { 
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) 
{layer = 1; dh = 1;} 

function dom(objectID,withStyle) { 
if (withStyle == 1) { 
if (id) { return (document.getElementById(objectID).style) ; } 
 else { 
if (all) { return (document.all[objectID].style); } 
 else { if (layer) { return (document.layers[objectID]); } 
 else { 
if (id) { return (document.getElementById(objectID))        ; } 
 else { 
if (all) { return (document.all[objectID]); } 
 else { 
if (layer) { return (document.layers[objectID]); } 

To use the API, link it from the Web page <head> section. Here is an example of a script link.

<script src="dom.js"></script>

Implementation of the DOM varies with browsers. There are differences in what actions can take place after the page has been loaded. For example, some actions require reloading of the page in Netscape, but not in Internet Explorer. The Web author needs to understand which features are supported by which browsers, and what workarounds can be used.

Dynamic Page Layout.

Positioning objects tells the browser how to treat an object when placing it in a window. Positioning was originally accomplished using a cascading style sheet extension known as CSS-Positioning (CSS-P). CSS-P became part of CSS2. The code in this discussion presumes a CSS2 or later version of CSS. Any tag enclosed in a two-sided HTML tag can be positioned using CSS. Positioning can be accomplished with a style declaration with the following syntax:

.class {position:type; left:value; top:value}

The first line of this page is positioned using the following CSS declaration:

<style type="text/css">
.indent {position:absolute; left:100px; top:10px; }

The CSS class is then applied using the following code:

<div class="indent"><h2>jqjacobs.net/web</h2></div>

Types of positions are absoluterelativefixed, or static. Absolute position places the object at a defined coordinate regardless of the location of other objects. Absolute position is always in relation to the upper-left corner of the parent object. Relative position places the object in relation to their normal place, to where it would have been placed originally if left alone, and that position is dependent on screen resolution and how the browser renders the page. Fixed positioning places the object at a fixed position in the window and the object remains in that position when the window is scrolled. Fixed positioning is not well supported by current browsers. Static positioning allows the browser to place the object. Static positioning, therefore, has no top or left attributes. Relative elements can be nested in absolute elements and vice-versa. A positioned element nested in another positioned element will use the top-left corner of the parent as its origin.

The left attribute indicates the location of the left edge of the object, and the top position indicates the position of the object's top edge. Coordinates can be defined in absolute values (the default unit is pixels) or as a percentage of the width of a parent object. It is also possible with CSS2 to set a position in relation to the right and bottom edges of an object, however, these attributes required the most recent versions of browsers.

Layering objects is used when positioned objects overlap. Layering allows specifying which objects are placed on top of others. The z-index style attribute is used to specify the stacking order. The attribute value can be either positive or negative integers, or "auto." The objects with the highest value are placed on top. The z-index value will only layer objects within the same parent element. To layer an object the position property needs to be defined in some manner. The following style positions an object and provides a z-index value of four.

.front { position:absolute; z-index:4 }

Object visibility is controlled using the visibility attribute with the property values of either visiblehidden or inherent. The inherent attribute results in the visibility being inherited from the parent element. The visible property makes the object visible in the page, the hidden property does the opposite. Normally hidden is used only when an action makes the object visible. Hidden objects continue to take up space in a document. To avoid using space with a hidden object use the display attribute with the value "none." Here is a sample CSS declaration of a visibility attribute. For a more complex use of the visibility function see the linked page, visible.html.
.hide { position:absolute; visibility:hidden }

Object cropping allows the author to specify which area of an element will be visible in the window. The remainder of the object becomes invisible, though still there. The syntax requires the clip property. The rect value defines the shape as rectangular (the only shape currently supported) and is followed by four coordinates in pixels. The coordinates define the top, right, bottom and left edges in relation to the upper-left corner of the object being cropped in pixels. Any specified borders and padding will also clip. It is advisable to apply clipping using a <span> or <div> tag rather than a style in an HTML tag. The following CSS declaration is an example of how to use the clip property.

.crop { position:relative; clip:rect(10 50 90 130) }

Another means of cropping is the overflow method. This method defines the amount of an image to display in the window and allows scrolling the remainder. Scroll bars are placed around the image as needed. To define the overflow property set the width and the height plus the overflow. The overflow can be set to autovisiblehidden or scroll. Auto allows the browser to decide wherther the extra area will show. Visible essentially overrides the cropping. Hidden both hides the overflow and prevents scroll bars from appearing. Scroll places scroll bars as needed. If the overflow property is not set browsers may ignore the height property. The following example illustrates a style tag inside an HTML tag.

<img src="photo.jpg" style="width:80px; height:80px; overflow:scroll">

Useful Links: