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.
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 } }
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.propertyNameor
document.layers["blockDiv"].propertyName
And then for Internet Explorer it's:
blockDiv.style.propertyNameor
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.
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. |
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:50px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red;"> </DIV> </BODY>
Example: javascript1.html [source] - 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". |
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.
Property | Netscape 4 Value | IE 4 Value |
left | 50 | 50px |
top | 100 | 100px |
visibility | show | visible |
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 |