Cross-Browser DHTML


DHTML is a powerful new language. However, its main drawback to date is incompatability. Many high-level scripts will be tailored to either Microsoft Internet Explorer 4.0, or Netscape 4.0. But there are very few tasks that can be preformed with only one or the other. Specifically, Netscape doesn't have full layer control, and Explorer doesn't have full javascript support. So check your scripts with both browsers when using these functions.

The first step to a cross-browser script is finding out what browser you have. This should be done with an in-depth detection rather than a quick Navigator or Explorer detection. This line sets it up: var agent = navigator.userAgent.toLowerCase(); Then, when you want to refer to it, if(agent.indexOf('WHAT YOU ARE SEARCHING FOR')!=1) This statement will return true if it finds what you're looking for. You can search for a browser, such as opera, explorer, or netscape. Notice that this is written in all lower case. Or you can search for an operating system or browser version. This is a very powerful script with just a single line of code.

Another way the browsers differ is the way they refer to objects. This can be dealt with easily with a line or two: if((agent.indexOf('netscape')!=1)&& (agent.indexOf('4.')!=1)) { doc = "document"; sty = ""; htm = ".document" } else if((agent.indexOf('explorer')!=1)&& (agent.indexOf('4.')!=1)) { doc = "document.all"; sty = ".style"; htm = "" } After using this script, you can refer to document objects as 'doc', style sheet objects as 'sty', and HTML objects within a style sheet layer as 'htm'.

By using these tricks, and testing all your scripts with both browsers, your DHTML scripts can work in any environment.

The copyright of the article Cross-Browser DHTML in Linux/Unix is owned by Robin Friedman. Permission to republish Cross-Browser DHTML in print or online must be granted by the author in writing.

Go To Page: 1

Articles in this Topic    Discussions in this Topic