Cross-Browser JavaScript

You can use JavaScript to access and change the properties of your CSS-P element. However, some of the syntax differs between Netscape 4.0 and Internet Explorer 4.0. By knowing where the differences lie, I'll show you an easy way to create cross-browser JavaScripts - scripts that will work in both N4 and IE4.

Browser Checking:

Revision: I'm now using ns4 and ie4 for browser checking instead of n and ie

First things first: we have to know how to check which browser someone is using. This little chunk of code will be the standard browser check in nearly all the examples in this tutorial:


ns4 = (document.layers)? true:false

ie4 = (document.all)? true:false

The document.layers object is specific to Netscape 4.0, while the document.all object is specific to IE 4.0. So by checking if the object exists we can create the boolean variables ns4 (for Netscape 4.0) and ie4 (for Internet Explorer 4.0) and assign them true or false depending on which browser is being used. Now whenever you need to check which browser someone is using you just have to use if (ns4) or if (ie4):


function check() {

	if (ns4) {

		// do something in Netscape Navigator 4.0

	}

	if (ie4) {

		// do something in Internet Explorer 4.0

	}

}

Using JavaScript and CSS-P:

Say we had a DIV tag that looked like this:


<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30;">

<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>

</DIV>

Remember that this is an example, you can rename blockDiv to whatever you want and it will still work exactly the same.

For Netscape the general way to access the CSS-P properties is like this:


document.blockDiv.propertyName

or

document.layers["blockDiv"].propertyName

And then for Internet Explorer it's:


blockDiv.style.propertyName

or

document.all["blockDiv"].style.propertyName

Where propertyName can be any one of left, top, visibility, zIndex, width, or any of the other CSS-P properties.

The Cross-Browser Method (Pointer Variables):

I've found that the best way to make cross-browser scripts is to have a variable, that depending on whether you're in Netscape or IE, points directly to either document.blockDiv or blockDiv.style, look below. I call these variables, pointer variables.


if (ns4) block = document.blockDiv

if (ie4) block = blockDiv.style

You see, after you do this, you can now access the properties using a shortcut way. For example if you wanted to check the left coordinate of our DIV tag called "blockDiv", it would simply be:


block.left

It doesn't matter which browser is used because for Netscape, block points to document.blockDiv, and in IE, block points to blockDiv.style.

Aside: Throughout this tutorial I will be naming my DIV tags with a "Div" on the end of them (squareDiv, blockDiv etc.). This is because when you initialize a layer using the pointer variable method, you have to choose a variable name that is totally unique - it cannot be the same name as one of your DIV tags. I just make it a standard in my code that all layers that are going to be initialized with pointer variables automatically have a "Div" and I make the pointer variable name without the "Div" - because as you'll see you end up using the pointer variable many more times than the name of the layer itself.

A Full Example:

This example will pop up an alert of the left, top and visiibilty properties of a CSS-P element.

The script:


<SCRIPT LANGUAGE="JavaScript">

<!--

ns4 = (document.layers)? true:false

ie4 = (document.all)? true:false



function init() {

	if (ns4) block = document.blockDiv

	if (ie4) block = blockDiv.style

}



//-->

</SCRIPT>

The HTML:


<BODY onLoad="init()">



<A HREF="javascript:alert(block.left)">left</A> -

<A HREF="javascript:alert(block.top)">top</A> -

<A HREF="javascript:alert(block.visibility)">visibility</A>



<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30; visibility:visible;">

<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>

</DIV>



</BODY>

Click Here to see this example

Important: I call the init() function in the BODY onLoad="" so that it will execute after the rest of the page is completed loading. This is because when defining your pointer variable, the DIV tag must already exist. If you try and define the variable before the page is done loading you'll recieve a JavaScript error like "block is not defined".

The Differences

If you open up both Netscape and IE and try that last example in each, you'll notice that you don't recieve the same values.

PropertyN4 ValueIE4 Value
left5050px
top10050px
visibilityshowvisible

These differences can cause some problems but in the next few sections I'll show how to get around them.

Home Next Lesson: Hiding and Showing
copyright 1998 Dan Steinman