Uncle Jim's Web Designs and Tutorials

This is part eight of a series on Dynamic HTML


DIV vs. LAYER

Browser Declarations:

Internet Explorer uses the <DIV> tag as it's basic DHTML object, while Netscape nests <DIV> objects inside of implied <LAYER> objects. This nesting affect causes conflicts between the margin, padding and other attributes associated with the <DIV> and <LAYER> itself. Because of this, it is recommended you use the <DIV> for all DHTML objects that are actually declared within the page, so the DHTML object in question is consistent with multiple browsers.

MSIE,NS W3C javascript reference

As mentioned above, there are significant difference in the methods used by MSIE and NS to reference DHTML objects from javascript .

MSIE uses document.all["objectName"] ,
NS uses document.layers["objectName"] , and
W3C uses document.getElementById("objectName") .

These basic differences can be normalized by using code similar to what follows at the top of your code.

if(document.layers)
	{
	document.all=eval("document.layers")
	for(x=0 ; x &#lt;document.all.length ; x++)
		document.all[x].style=document.all[x]
	}
if(!document.all)if(document.getElementsByTagName)
    document.all=document.getElementsByTagName('DIV')

This allows your code to manipulate DHTML objects with little regard to platform by utilizing the following code to reference the objects:
document.all["objectName"].style.attribute

Object detection vs. browser detection.

Object detection is a much better method to use than browser detection. Developers used to address the differing syntax by sniffing for specific brands and versions of browsers, but the problem with that approach is that new brands and versions are always on the horizon and eventually the sniffing code takes up more space and time than the application itself. The preferred method is to use object detection, which simply tests if a browser has a particular object without having to guess the browser version itself.

Javascript language allows you to add new properties and methods to most pre-existing objects, so often (as in document.getElementById() ), when a property or method does not exist, you simply create a simulation of that function. I also recommend developing a library of functions to accomplish basic tasks like hide,show,move,clip etc. By doing this, you can handle any upcoming variations or special exceptionswithout re-writing your code everytime. When you are naming these general functions, prefix the function names with something like "DM" so as to avoid running into predefined functions, So "DMmoveTo()" is better than "move()". It also helps you later when you want to make changes to your code.

Next, we discuss use of the ID, CLASS and STYLE attributes.