Home > Features > Intro to DHTML • Bookmark   • Newsletters   • Register Search Options


Intro to DHTML

Intro to DHTML

May 13, 2002
Text size: 
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 168 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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:

!-- 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 -->

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!


Camming Issue: Profits on Rise for Performers

It’s been 20 years since JenniCam rocked the infant internet with the first adult-oriented live cam shows, revealing the intimate details of this groundbreaking cam performer’s daily life —... More »

Caring About Camming: Academia Takes a Closer Look

Editor’s Note: Rachel Stuart is a PhD Researcher at the University of Kent’s School of Sociology, Social Policy and Research, undertaking an investigation of some of camming’s nuances,... More »

Sex Toy Distributors Bolster Retailer Success With Sex Education

Adult sex education is not only valuable for consumers of sex toys and pleasure products — it is also valuable for companies that are manufacturing, distributing or selling them. Knowledge is power... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA

ANME Founders Show

Jan 14 - Jan 15
Los Angeles Marriott Burbank Airport

Everything To Do With Sex Show

Jan 20 - Jan 22
Montréal, Québec
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!