DHTML Primer for Popular Web Browsers

Introduction

Dynamic Hypertext Markup Language (DHTML) has become a common acronym in the Web community since its debut with the version 4.0 releases of Microsoft and Netscape's Web browsers. DHTML represents the synthesis of HTML, Cascading Style Sheets (CSS), and JavaScript.

• Sample Code Explanation
• Sample Code
• Conclusion

The benefits of DHTML are mostly cosmetic but can also include functionionality. DHTML gives you a rich palette of multimedia and Graphical User Interface (GUI) options that can be used to enhance a Web page. Also, DHTML is low-bandwidth and is built into the browsers. Unlike Flash and Java, No plug-ins or lengthy download times are required.

Although both Navigator 4.0 and Internet Explorer 4.0 (IE) supported DHTML, each took different paths to syntax support and tried to enforce proprietary standards. Because the majority of Web users use one of the two products, most complex DHTML designs force authors to write two versions of thier code in order to support both browsers. Needless to say, designing and maintaining two versions of code does not sit well with most designers.

The World Wide Web Consortium (W3C) has proposed DHTML standards, such as Document Object Model (DOM), for some time. With the release of IE 5, Microsoft made some effort to start implementing DOM standards while staying backwards compatible with IE 4.x DHTML. For the most part, IE 5.5 continued this trend. With the release of Navigator 6.0, Netscape fully embraced DOM standards and completely dropped all support of proprietary Navigator 4.x DHTML.

So, the life of a DHTML developer has become even more complex. Not only does he or she have to keep track of all of the minor browser releases but also the basic core functionality of Netscape 4.x, IE 4.0 and above, and pure DOM compliant browsers like Netscape 6.0. As troublesome as this sounds, don't despair because the future of DHTML is bright! As people stop using the older browsers in favor of newer versions and the newer browser releases continue the trend of DOM standard compliance, it should only be a matter of time before a single version of DHTML code will work on all browsers.

The small code example below will create a basic DHTML menu object that you can move up, down, left, right, hide, and show. It should be compatible in Navigator 4.x/6.0 and IE 4.x and above. The code sample assumes the user supports one of the three flavors of DHTML (i.e., NS 4.x, IE 4.0 and above, or level 1DOM), including CSS and Javascript.

The first code block sets up the style sheet, including basic display properties like menu color and starting position. Known as the Div element, the second code block packages content together into one addressable block. In this case, the menu is the content. The third code block is actual HTML links that fire off the various Javascript functions that will move and hide the menu. The fourth code block is the actual Javascript, which contains variables to hold the current X and Y location of the Div element.

Next comes the browser detect. One of the most important parts of any DHTML implementation is a good browser detecting script. Many are available on the Web and the Allaire's Developers Exchange. This code uses a simple JavaScript-based browser detect that looks for supported functionality, not specific browser version or vendor.

Using an IFELSE block and detecting in the order shown below, you can detect the highest level of DHTML compatibility in case the browser supports more than one standard:

1. DOM1 compliant browsers by detecting the existence of document.getElementByiD
2. IE by looking for document.all
3. Netscape 4.x by looking for document.layers

Note: The browser detect gives critical information to set the path variable with the correct reference path to the DHTML object. By using this technique, we can still share all of the same functions between the different browsers. This is a good example of a "cross-browser" DHTML scripting technique.

Finally, this section contains the functions to moveX, moveY, and to hide/show the DHTML menu.

<!-- This is the style sheet for the DHTML object -->
<STYLE TYPE="text/css">
<!--
#menu {position: absolute;
        top: 100px;
        left: 100px;
		border: 1px;
        font: 12px arial;
        font-weight: 750;
background-color: silver;
}
-->
</STYLE>

<!-- This is the actual DHTML object -->
<DIV ID="menu">
1) <a href= "http://www.allaire.com">Home Page</a><br>
2) <a href= "http://devex.allaire.com/developer/gallery/">Developers Exchange</a><br>
3) <a href= "http://forums.allaire.com/DevConf/index.cfm">CF forums</a><br>
</DIV>

<!-- This set of links call javascript functions to manipulate the DHTML object -->
Allaire Menu
<A HREF="#" onClick="showHide(0); return false;">[Show]</A>
<A HREF="#" onClick="showHide(1); return false;">[Hide]</A>
<A HREF="#" onClick="moveY(-25); return false;">[Up]</A>
<A HREF="#" onClick="moveY(25); return false;">[Down]</A>
<A HREF="#" onClick="moveX(-25); return false;">[Left]</A>
<A HREF="#" onClick="moveX(25); return false;">[Right]</A>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

<!-- These variables hold the current location of the DHTML object -->
onY = 100;
onX = 100;

<!--- This next block sets the path variable with the proper path (based on browser type) to address the DHTML object --->

<!-- Browser check: DOM compliant browser -->
if (document.getElementById)
{
        path = document.getElementById('menu').style;
}
<!-- Browser check: IE DHTML compliant browser -->
else if (document.all)
{
        path = document.all.menu.style;
}
<!-- Browser check: NS (4.x) DHTML compliant browser -->
else if (document.layers)
{
        path = document.menu;
}

<!-- This function is responsible for showing and hiding the DHTML object -->
function showHide(flag)
{
        if (flag) path.visibility = 'hidden';
        else path.visibility = 'visible';
}

<!-- This function is responsible for moving the Y (up/down) location of the DHTML object -->
function moveY(amount)
{
        onY += amount;
        path.top = onY;
}

<!-- This function is responsible for moving the X (left/right) location of the DHTML object -->
function moveX(amount)
{
        onX += amount;
        path.left = onX;
}

// -->
</SCRIPT>

DHTML is a powerful tool. As stated in the introduction, it is low bandwidth and requires no browser plug-ins. The biggest problem with using DHTML is working around all of the various implementations among different browsers. With the W3C DOM standard, this concern will hopefully become less of an issue as browser vendors begin to adhere more to standards.