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!
DHTML resources
Obviously, this tutorial serves only as an introduction to DHTML. Here
are a couple of great resources to continue your DHTML endeavor:
-A1 JavaScripts DHTML examples
-Dynamic Drive DHTML examples
-MSDN's
guide to DHTML
This tutorial is written and contributed
by Davud Gardner. David is
an aspiring web designer, and hopes to one day quit his day time job and
create websites for a living.
-Tutorial
Introduction
-What
is DHTML?
-DHTML
in NS- The <layer> tag
-DHTML
in IE 4
-Dynamic
Content
-Moving
elements around in the document?
-Creating cross-browser DHTML/ DHTML resources
