| home / programming / professional / chap6/ 2 |    [previous] [next] |
|
|
|
Now we know how to perform our DHTML magic in three DOMs: the W3C DOM (which will be discussed in more detail below), the Microsoft DOM, and the Netscape DOM. Let's repeat the code. In the W3C DOM, you should use:
function changeIt() // W3C DOM
{
document.getElementById('testdiv').style.left = 0;
document.getElementById('testdiv').style.position = 'relative';
document.getElementById('testdiv').style.font = '20px verdana,arial,helvetica';
document.getElementById('testdiv').style.textAlign = 'right';
}
For IE 4's sake, you should use:
function changeIt() // Microsoft DOM
{
document.all['testdiv'].style.left = 0;
document.all['testdiv'].style.position = 'relative';
document.all['testdiv'].style.font = '20px verdana,arial,helvetica';
document.all['testdiv'].style.textAlign = 'right';
}
And for Netscape 4's sake you should use:
function changeIt() // Netscape DOM
{
document.layers['testdiv'].left = 0;
}
How do we merge these various ways of accessing the correct elements into one script? What we need to know is which DOM the browser supports. Then we can offer it some lines of code that make use of this DOM. How do we find out which DOM a browser supports?
The worst possible solution is a browser detect or browser sniffing. Although a browser detect will work for all browsers that the writer of the script knows about, it won't work for any other browsers. Any browser should have the chance to execute the script, unless it doesn't support a DHTML-capable DOM. If the Konqueror browser, which has excellent W3C DOM support, isn't allowed to execute the script for the silly reason that it isn't Netscape or IE, your script is badly written.
Solving the problem is easier than it seems. The main problem is accessing the correct <div> element. As soon as we get there, we only need to change its style properties, and this works in nearly the same way in all browsers. Accessing the correct <div> can be done in many ways. One of them is the following.
The function changeIt(), attached to the href attribute of the link in the HTML, just asks for the element with id="testdiv" and changes its styles. Actually getting the correct element is the task of another function, getObj().
function changeIt()
{
var x = new getObj('testdiv');
x.style.left = 0;
x.style.position = 'relative';
x.style.font = '20px verdana,arial,helvetica';
x.style.textAlign = 'right';
}
The getObj() function is passed the id of the element that it needs to find. Then it starts detecting DOMs. If the W3C DOM is supported (in particular, if document.getElementById is supported), the W3C DOM code is executed. If it isn't supported, we look for the Microsoft DOM (in particular, document.all). If that isn't supported, we check for the Netscape DOM (in particular, document.layers).
function getObj(name)
{
if (document.getElementById)
{
// W3C DOM code
}
else if (document.all)
{
// Microsoft DOM code
}
else if (document.layers)
{
// Netscape DOM code
}
}
If the function has found a DOM the browser supports, it sets two properties: style and obj. The syntax of the W3C DOMS is very much like Microsoft's:
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
The Netscape DOM is different, though. Layers have no style property, so style and obj should both refer to the layer itself.
else if (document.layers)
{
this.obj = document.layers[name];
this.style = this.obj;
}
In the function that actually changes the styles (changeIt()), the style and obj properties are assigned to the "object" x. Now we can change the style.left of x without compatibility problems.
This simple function solves most DHTML browser incompatibilities, except for the most important one: some browsers simply don't support the changing of certain styles .
In Netscape 4, though, there's one more problem concerning nested layers. For more information on this, see the text document and example in the code download.
| home / programming / professional / chap6/ 2 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 28, 2003
URL: http://webreference.com/programming/professional/chap6/2
