DHTML

DHTML Lab 8:
JavaScript and the DOM With CSS in Netscape

OK...good news. You've already learned how to do this! How you ask? Well, do you remember when we learned about using JavaScript with Netscape Layers in the last lesson? Well, Netscape JavaScript treats Cascading Style Sheets exactly like Netscape Layers. That is, you will use the same code to manipulate and move your CSSP's that you would to manipulate and move your Netscape Layers. You're going to use the ID of your CSS as the name of hte layer that you want to work with, and do everything else precisely the same.

Don't believe me? Take for example that scrolling text at the top of this page. Let's make that with Netscape Layers.

In HTML mode, Type the following code into the edit textarea below:
<body bgcolor=white>

<layer id="s1" top=0 left=0><font size=6 color=darkred>DHTML</font></layer>

 <script language=javascript>
<!--
function moveIt(){
if (document.layers["s1"].left < 640) {
document.layers["s1"].left += 1;
timerId = setTimeout("moveIt()",20);
}
}

moveIt();
 //-->
</script>
</body>


This is almost exactly the same as the example we did in Tutorial 5. In fact, I copied and pasted the code. The only change I made was to substitute the ID of my current layer for the ID of the layer we used in Tutorial 5.

Now, let's replace our Netscape Layer with a CSSP <span> and use the stylesheet syntax and see if the same code works. We need to make sure that the ID of our <span> is the same as our old layer, but other than that we can do whatever we want.:

In HTML mode, Type the following code into the edit textarea below:
<body bgcolor=white>

<span id="s1" style="position:relative;top:0;left:0;"><font size=6 color=darkred>DHTML</font></span>

<script language=javascript>
<!--
function moveIt(){
if (document.layers["s1"].left < 640) {
document.layers["s1"].left += 1;
timerId = setTimeout("moveIt()",20);
}
}

moveIt();
 //-->
</script>
</body>


OK. Go try it out. Does exactly the same thing right? Right.

So, if you want to use JavaScript with CSSP in Netscape, use exactly the same methods, properties, and object references that you would use with Netscape Layers (see DHTML Lab VII for a refresher.)

Introduction to the Document Object Model

In the title of this lesson we mention the "DOM" short for the Document Object Model. DOM is simply another name used that means Object Reference. For now, when it comes to CSS, Netscape and MSIE have a different DOM. We have just covered the DOM for Netscape for CSS and layers. We used the DOM to reference the CSS objects and changed them with JavaScript.

For Netscape the DOM has the following structure:
document.elementname.styleProperty


OR with the layers array...


document.layers["elementname"].styleProperty

In the next lesson we'll find out that Microsoft Internet Explorer has a slightly different Document Object Model.

See you at the next learning lab!!