A Cross Browser Dictionary
January 19, 1999
A "translation dictionary", bridging the DHTML
syntax gap between browsers.
function crossBrowser()
{ if (document.all)
//Microsoft syntax
{ obj = "document.all";
innerLayersLength = ".children.length";
innerLayer = ".children";
posLeft = ".style.pixelLeft";
posTop = ".style.pixelTop";
posWidth = ".clientWidth";
posHeight = ".style.pixelHeight";
posHeight2 = ".clientHeight";
bgColor = ".style.backgroundColor";
visibility = ".style.visibility";
visible = "='visible'";
visible_eng = "visible";
invisible = "='hidden'";
invisible_eng = "invisible";
startItemDiv = "<div class=\"item\"
onMouseOver =\"this.style.backgroundColor='"+
menuHIGH+"';\"
onMouseOut =\"this.style.backgroundColor='"+
menuBGCOLOR+"';\">";
headlineDiv ="<div class=\"headline\">";
closeItemDiv ="</div>";
}
else
//Netscape syntax
{ obj = "document.layers";
innerLayersLength = ".document.layers.length";
innerLayer = ".document.layers";
posLeft = ".left";
posTop = ".top";
posWidth = ".clip.width";
posHeight = ".clip.height";
posHeight2 = ".clip.height";
bgColor = ".bgColor";
visibility = ".visibility";
visible = "='show'";
visible_eng = "show";
invisible = "='hide'";
invisible_eng = "hide";
startItemDiv = "<layer id=\"itemlayer\" left=0
onMouseOver =\"this.bgColor='"+
menuHIGH+"';clearTimeout(opener.clearPop);\"
onMouseOut =\"this.bgColor='"+
menuBGCOLOR+"';\"
bgcolor =\""+menuBGCOLOR+"\">";
headlineDiv = "<layer id=\"headlinelayer\"
left = 0
width = 250
position =\"absolute\"
z-index = 1 bgcolor=\""+headBGCOLOR+"\">";
closeItemDiv = "</layer>";
}
}
|
The crossBrowser() function appears ominous
at first but it is actually quite
amiable. This function serves to bridge the syntactical
gap between DHTML support in Navigator 4 and Internet Explorer
4. Thought of as a translation dictionary of sorts, this
function defines a set of standard variable names, such
as obj, and defines them through their literal
meaning in each browser. So, for example, while one refers
to a layer object in Internet Explorer via the reference
"document.all", one would refer to a layer in
Netscape using "document.layers".
Using this approach, we will simply substitute the term
obj when needing to reference a layer, as you
will soon see, sidestepping the syntax squabble. The key
to this trick will be the JavaScript
eval() function.
This function accepts a string parameter and it executes
the value of the string as a
JavaScript statement. For
example, imagine that we've defined a variable named
closeme thusly:
closeme="self.close()";
The following statement, then, would be the functional
equivalent of "self.close()":
eval(closeme);
In any case, the crossBrowser() function simply
defines the translations ... shortly, we'll see them
used in action.
Creating the menu arrays and global color values
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Internet Explorer 4 mouse events
|
