A Cross Browser Dictionary

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