|
JavaScript and the DOM with CSSP in MSIE At the end of the last lesson we briefly mentioned the Document Object Model or DOM for short. At the time I mentioned that the DOM for MSIE is slightly different than for Netscape. Let's compare the DOM's (or object reference) for the two browsers. DOM for Netscape: OR using the layers array: DOM for Internet Explorer: Or using the all array: MSIE uses the W3C recommended DOM. This DOM allows access to every element on the screen. Notice it has an object or array called all that holds all of the elements in it. Also, since since all of the properties we add with CSS are included in the style attribute we include style in the object reference before listing the styleProperty we are accessing. Let's try an example to see how this works:
Preview this. This is how we access all of the properties. And like in the last lesson we can change these properties. But there are some little things that can be bothersome. For example, try the following code:
Pretty straight forward right? Right. Go try it. The word "DHTML" should move across your screen. Guess what...it doesn't work! Why not?! Well, let's find out. Let's see if the script is even finding the "left" property correctly by adding in an alert (don't forget to comment out the "setTimeout" line as I did or our test will run forever.):
Go run it and you'll find the problem. MSIE returns all CSS coordinates and sizes in pixels as a STRING! Instead of a number. Don't ask me why. I know it's dumb. But anyway, because of this, our position has a "px" at the end of it. We need to get rid of this so that a) we have just a number and b) that number can be used in a mathematical expression (i.e. document.all["bob"].style.left < 640). Here's how we do it...we use the javascript property length to find the length of the string containing the "px", then use the method substring to grap the part without the "px" on it. Then we have to run it through the "eval()" method to convert it to a numerical value (otherwise the value is a string and we can't do math with it.) So, here's the code to do it:
Now TRY IT! Make sure the setTimeout line isn't commented anymore from the previous example. The DHTML should now scroll nicely across your screen. Go try that...don't forget to uncomment your "setTimeout" line so that it runs continuously. It works now! Looks just like the ones we did with Netscape Layers and CSS with Netscape! Notice a couple of things though. MSIE has slightly different object references...not better or worse, just different. Also, MSIE includes units in it's measurements. This can be good, but can also cause us to do a _little_ extra work. Did you notice that we didn't supply units in our measurements when we changes the position of our stylesheet (i.e. we could have said 5px)? MSIE assumes that, when you don't supply units, you mean pixels. We could use any of the valid CSS units if we wanted to (as in 150pt), but most times you will be working with pixels, so that's what we'll stick with. OK...we've hit the big points. All of the concepts of using JavaScript with CSSP, whether in Netscape or MSIE, are basically the same. There are only minor differences such as object references and the use of units in MSIE. But, once you accomodate those things, you code for either browser will otherwise be the same...that is, you've already learned how to use JavaScript with CSSP in both browsers. Here's what I suggest you do now...try making the example we did in this tutorial move from top to bottom instead of left to right. If you wanted to get really creative, you could make it scroll diagonally from top left to bottom right. Once you've done that come see me in Tutorial 10. |