|
Lesson 6 - Creating cross-browser DHTML
Before "true" cross-browser DHTML becomes available (in other
words, when NS and IE comes to their senses), cross-browser DHTML basically means using
various scripting techniques you picked during those JavaScript years to sniff out which
browser the user is using, and execute the code intended for that browser. In this lesson,
I'll first illustrate a way of creating a "cross-browser" layer, then show you a
scripting technique I recently learned that allows you to easily sniff out the browser
type of the surfer.
Creating a "cross-browser" layer
Ok, so we've got NS that understands the <layer> tag, and
IE that understands the <span> and <div>. If we wanted to create a simple
DHTML effect such as a moving image, we would usually need to use two tags- A layer tag
for NS 4, and either a div or span tag for IE 4. Not exactly pretty, uh? Well, I recently
learned that there is actually a way to create a "cross-browser" layer that uses
only one tag, although its a little buggy on the NS side. Apparently NS 4 treats an
absolutely positioned div the same as a layer. So, without any further delay, here's an
example of a cross browser layer:
<div id="crosslayer"
style="position:absolute"></div>
NS 4 treates the above div exactly the same as it would with a
layer. Like any other layer, to access it , we would first go go through the document
object, then the layer's id:
document.crosslayer
In IE 4, we would simply use the div's id:
crosslayer
I found that in NS, specifying a layer this way, while convenient
in terms of cross-browser compatibility, has one major draw back. Such a layer doesn't
always behave the way a normal layer should, and can sometimes actually crash the browser.
Just be prepared to expect the unexpected!
Browser sniffing- object detection
Up until recently, whenever I wished to determine the browser
type of my surfers, I would use the navigator object, like most JavaScript programmers
would. The below illustrates using this object to sniff out both NS 4 and IE 4:
var ns4=
(navigator.appName=="Netscape"&&navigator.appVersion>=4)
var ns4= (navigator.appName=="Microsoft Internet
Explorer"&&navigator.appVersion>=4)
Personally, I hate using the navigator object- its so complicated
to use (just look at the above mess!). Well, I have good news to bring to you. There is
actually a lot quicker way to sniff out various browsers, and its called object detection.
The idea is based on the way JavaScript works. If the browser
does NOT support a particular object, JavaScript returns null when you reference it.
Knowing this fact, we can use an object reference in your if statement (in place of the
navigator object) to determine the browser of the user.
Let's do an example. We know that NS 3+ and IE 4+ support the
document.images object. If we wanted to sniff out these browsers, we would do this:
if (document.images)
alert("You are using NS 3+ or IE 4+")
Translating the above into English, it reads: "If the
browser supports the images object (which only NS 3+ and IE 4+ do), alert a message.
Think of object detection as an indirect way of determining the
browser type of the user. Instead of directly determining the name and version of the
user's browser (through the navigator object), object detection is a more generic, less
hassling browser sniffing technique.
So, how can we use object detection to sniff out NS 4 and IE 4?
Well, only NS 4 supports the document.layers object, and only IE 4 supports document.all.
We can use this knowledge to easily determine whether the user is using NS 4, IE 4, or
both:
if (document.layers)
alert("You are using NS 4+")
if (document.all)
alert("You are using IE 4+")
if (document.layers||document.all)
alert("You are using either NS 4 or IE 4+")
Now you never have to return to the messy navigator object to do
your browser sniffings!
| 
