background
|
|
RiscOS
Risc OS Info
All you need to know about Risc OS and more.
More icon

Random
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Taylor's Dynamic HTML Tutorial
Lesson 3

by Taylor

Page 3 — Make It Work in Both Browsers

There are many ways to perform conditionalization with JavaScript. One way is to determine what browser type and version a visitor is using and do the appropriate action based on that. I discussed this in my article on snooping with JavaScript and CGI. However, I was young back when I wrote it, and I've since found better ways to do things.

The first problem with conditionalizing based on browser type and version is that, well, browsers change. If you conditionalize everything so that Internet Explorer 4.0 gets one version and Netscape 4.0 gets another version, what happens when a 5.0 browser comes knocking on your page? Or what if there is some new browser released that is compatible with both of these, but for which you haven't specifically accounted in your script? Conditionalizing based on that criteria just falls apart.

A much better way to do this is to conditionalize based on features. If you've read Thau's JavaScript tutorial, you'll know that when JavaScript executes an "if" statement, it tests to see whether the statement returns a true (1) or false (0), and then it executes a statement based on what it returned. Most of the time this is used to test some condition on a variable, like so:

    if (x<=5) setTimeout('doSomething()', 500);
But the existence of an object is also a condition that can be tested for. If the object exists, then it returns true; if it doesn't exist, then it returns false. So to provide a good conditional, you test against an object representative of a particular way of doing dynamic HTML.

What are good objects? This is where you can use the wildly different implementations to your advantage.

Netscape uses the layers object to do dynamic HTML. This works in a similar manner to the images array in Navigator. You have an array of layer objects, referenced much the same way as images. So document.layers['foobar'] would be the object that would represent the absolutely or relatively positioned <DIV> (and in the Netscape model, it has to be a relatively or absolutely positioned <DIV> or <SPAN>) in your document that has the NAME or ID of "foobar". From there you can get or set any of the properties that I mentioned above. You could also represent the object as document.foobar if you are in a hurry.

Internet Explorer, on the other hand, exposes things as a flattened representation. So that a <DIV> with the ID or NAME foobar would be just that: foobar. So you would say, foobar.style.left to get or set the left placement of this object. But there are also ways to loop through collections of objects (which is always useful). In Explorer's Document Object Model, the object represents all the objects below and object (object object object) is the all collection. So foobar.all contains any HTML tags nested within foobar. So to find a nice generic object that you always know will be there, look to the document object, and the document.all object specifically. It's a good one to use, because every Web page has a document and therefore has the object document.all.

next page»