dhtml scripting

Datacom Consulting, a partner in Innovative Data makes extensive use of DHTML in web site design and production. With the new browsers (4.0 and up) DHTML is becoming far more common. Here is a brief description of DHTML, and it's advantages.

First of all, dynamic HTML as a self-contained thing-unto-itself is really just an idea. It is not any one specific technology (such as JavaScript or ActiveX). Nor is it a tag, a plug-in, or a browser.

Dynamic HTML (aka dHTML or DHTML) is one of the most exciting and useful things to happen to the Web in recent memory. It's a concept that has been enabled (to different extents in different browsers, of course) by a number of technologies, including JavaScript, VBScript, the Document Object Model (DOM), layers, and Cascading Style Sheets (CSS).

So, what IS it? Here's the short answer: Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser. A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads.

So, how can HTML be changed after it's been downloaded? There needs to be some way to tell the browser to change it, which brings us to the technologies that make up DHTML:

Dynamic HTML is client-side scripting

People have been using client-side scripting languages (JavaScript and VBScript in particular) to change HTML for a long time. If an image changes when you roll your mouse over it, you're looking at an example of dynamic HTML. The 4.0 browsers from both Microsoft and Netscape allow more of a page's HTML elements to be accessible from within scripting languages. The mechanism whereby page elements (or document objects) are opened to scripting languages is called the Document Object Model.

Dynamic HTML is the DOM

In a sense, the Document Object Model is the real core of dynamic HTML. It makes HTML changeable. The DOM is the hierarchy of elements that are present in the browser at any given time. This includes environmental information such as the current date and time, browser properties such as the browser's version number, window properties such as window.location (the page's URL), and HTML elements such as tags, divs, or tables.

By exposing the DOM to scripting languages, browsers enable you to access these elements. While some elements such as the time of day can't be changed themselves, they can be used by scripts to modify other elements.

There was a Document Object Model before Internet Explorer 4.0, but earlier implementations pale in comparison. With IE 4, it is possible to access any part of the HTML on your page using any scripting language that runs in the browser.

(Although Netscape's DOM is much more limited than IE's, you can put the part of your page you want to change in a layer container and then change the layer. And Netscape says it will fully support the W3C's DOM specification in future versions of the browser.)

The part of the DOM that specifies which elements can trigger changes is the event model. Events are things like moving the mouse over an element (onmouseover), loading a page (onload), submitting a form (onsubmit), clicking on a form input field (onfocus), and so on.

Dynamic HTML is CSS

Because they are part of the DOM, CSS properties are accessible to scripting languages, and it is therefore possible to change almost anything about the way a page looks. By changing the CSS properties of a page element (such as its color, position, or size), you can do almost anything bandwidth and processor speed permit.

To sum all this up: 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. And that's dynamic HTML.

Both Netscape's and Microsoft's browsers support DHTML to some degree but they differ in both accepted HTML syntax and scripting code. This has made it very difficult for web designers to create dynamic pages that look and act the same on both of the major browsers.

To that end, most designers and some development tools will make use of a library of routines to detect the browser and run the proper code for it. This provides basic functionality while hiding the details of browser-dependent implementation

This DHTML Library provides basic functions for manipulating positioned elements in both Netscape Communicator and Internet Explorer browsers (versions 4.0+).This site uses this library directly or includes parts of it. These functions allow you to get and set various properties of elements including visibility, position, clipping area and background color or image. Functions are also provided to allow you to easily scroll the contents of an element. Additionally, there are functions to find window or frame properties.