For many neophytes, 'DHTML' is simply the combination of HTML and JavaScript, but this definition does not encompass the full scope and power of this technology, for DHTML is an integrated array of features in most 'Version 4' or newer browsers that allow web pages to be much more Dynamic: hence the 'D' in "DHTML."
DHTML is not a scripting language like JavaScript, but a software enhancement that gives your browser the ability to display content dynamically. So what you really want to understand is not DHTML, but rather, the coding syntax needed to employ DHTML and its support for dynamic content in your Web page's design...
To understand this concept a little better, we will define the term 'dynamic' to mean "the inherent ability of the browser to change the displayed page's appearance after the document has loaded, and without reloading the initial page." You have now likely considered the 'inherent ability of the browser' portion of the above definition, and come to the conclusion that this means the typical 'non-standard' foolishness that MSIE and Netscape are famous for, with IE's 'marquee' and NS' 'blink' commands easily coming to mind. Far more powerful but obvious outgrowths of the above examples, today's implementation of DHTML technology is no more cross-browser compatible than either of these 'ancient' commands, but with the amazing eye-candy effects that DHTML is capable of (especially in Internet Explorer's incarnation of it), it is a technology well worth using for a variety of page-enhancement applications.
Writing Cross-Browser DHTML
Unless (or until if you're the 'hopeful' type) a cross-browser implementation of DHTML becomes available, JavaScript browser-sniffing is typically used to determine which set of commands can or should be executed to perform some specific operation within the parameters required by, or available to, the specific browser type. The following techniques will reveal how to create a cross-browser layer, as well as an easy way to sniff out a surfer's browser type.
A Cross-Browser Layer
Since NS understands the LAYER tag while MSIE reads the DIV and SPAN tags, if we wanted to create a simple DHTML effect such as a moving image, we would usually need to use two tags: a layer for NS 4+, and either a DIV or SPAN tag for IE 4+. Although this method can be somewhat 'buggy' in Netscape (what isn't?), NS apparently handles an absolutely positioned DIV tag the same way as a layer, allowing us to use a cross-browser layer that requires only one tag, for example:
DIV id="crosslayer" style="position:absolute"> /DIV>
NS 4+ will handle this DIV exactly the same as it would a layer. Like any other layer, we would first go through the document object , then the layer id for access: document.crosslayer while in IE 4+, we would simply use the div's id: crosslayer.
Although specifying a layer this way is convenient in terms of cross-browser compatibility, it has one major draw back, in that such a layer doesn't always behave the way a normal layer should in NS, and can actually crash the browser on occasion! Unless you are certain that you're application will be stable, then a better alternative may be to write specific code for specific browsers, and the key to this is to be able to redirect surfers based upon their browser type. Here's how to do it: Think of object detection as an indirect way of determining browser type.
Browser Sniffing Through Object Detection
Determining a surfer's browser with JavaScript by using the navigator object is a common task:
SCRIPT LANGUAGE="JavaScript">
!-- Browser Redirect
if (navigator.appName.indexOf("Explorer") != -1){
window.location = "http://www.yoursite.com/ie_url.html";}
if (navigator.appName.indexOf("Netscape") != -1){
window.location = "http://www.yoursite.com/ns_url.html";}
// Browser Redirect -->
/SCRIPT>
But using the navigator object can be complicated to use, so object detection can be used instead. If the browser does not support a particular object, JavaScript returns null when you reference it. Knowing this, we can use an object reference in the if statement (in place of the navigator object) to determine the browser of the user. Think of object detection as an indirect way of determining browser type. Instead of directly determining the name and version of the user's browser (through the navigator object), object detection is a more generic browser sniffing technique. Since only NS 4+ supports the document.layers object, and only IE 4+ supports document.all, we can use this knowledge to easily determine whether the user is using either:
if (document.layers)
{window.location = "http://www.yoursite.com/ns_url.html";}
if (document.all)
{window.location = "http://www.yoursite.com/ie_url.html";}
While either technique will work for you, the latter is far more simple, while the former will allow you to discriminate additional browser types, such as WebTV.
Microsoft (as one might naturally expect) offers an exhaustive look at the amazing things that can be accomplished through the use of DHTML, which can be accessed here , and if you're not convinced that DHTML is right for you, or if you're the 'copy-n-paste' type, visit Dynamic Drive , where a whole new world will open up for you!
