Browser detection Web Designing

All of the DHTML examples we've looked at in this chapter depend on features of the DOM Level 1 and DOM Level 2 standards, which means that they only work in the latest web browsers, Netscape 6 and Internet Explorer 5.5. This means that if you use one of these examples, you must first check for the user's browser type and version, so that you can make sure that the browser supports the script. Each of the example scripts should begin like this:

This code checks the identity and version of the browser and sets the appropriate variable to true: isDOM for a standards-compliant version of Navigator or IE, isNN4 for Netscape Navigator 4, or isIE4 for IE 4.

Once we have tested the user's browser and set the appropriate variable, we can use that variable to run the right browser-specific code:

Layers in the 4.0 Browsers
The DHTML code that we've used to access and manipulate layers works only in the latest web browsers. If you need to support the 4.0 browsers, there are a few things you need to know about their proprietary versions of DHTML.

Netscape introduced a <layer> tag in Navigator 4.0 for creating layers, while Microsoft implemented layers with <div>tags in Internet Explorer 4.0. As of Netscape 6, Netscapeas dropped the <layer> tag because it never became a standard, so you can use <div> layers in both browsers from now on.

The key thing with DHTML is being able to access the layer objects, so that you can manipulate them. In the Internet Explorer 4.0 DOM, you can access all the layers in a document through the all property of the document. A reference to a layer looks like this:

document.all.layer_name

Thus we would access our sliding tab layer like this:

document.all.TabLayer

Once you have a reference to a layer in IE 4.0, you can access the CSS properties through the style property, just as we've been doing in all of the examples in this chapter:

document.all.TabLayer.style.left

Unfortunately, with Netscape Navigator 4.0, things aren't quite so simple. You access a Navigator 4.0 <layer> like this:

document.layer_name

So the following code would refer to our sliding tab layer:

document.TabLayer

In Navigator 4.0, the layer object defines a number of properties and methods that you can use to manipulate the layer. The properties largely correspond to the CSS property names, but you access them directly through the layer object; there is no style property:

document.TabLayer.left

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Web Designing Topics