| - basic scripting - |
|
Netscape's dHTML gets very confusing to me for some reason, but if I step back and look at it, it 's really a lot easier to understand then Microsoft's. Let's build onto the script we had before. So let's add this: if (n) { to the script, and I'll also add the Netscape commands with it, and they'll we'll talk about it. The script: (pay attention the part in the if(n) part.
<script lanugage="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
function moveIt() {
//for microsoft
if (m) {
theObj.style.left = parseInt(theObj.style.left) + 20;
if (parseInt(theObj.style.left) > 500) {
theObj.style.left = -100;
}
}
//for netscape
if (n) {
document.theObj.left += 20;
if (document.theObj.left > 500) {
document.theObj.left = -100;
}
}
setTimeout("moveIt()",100);
}
//-->
</script>
Remember how Netscape and Microsoft each have a seperate way of calling up the CSS properties? Well, the Netscape part of the script is saying the exact same thing as the Microsoft part. It's just accessing the CSS properties differently. So that first line:
document.theObj.left += 20; document.theObj.left accesses the objects left position. The += 20 on the end just adds twenty onto the position. So now the object has moved. Then from there:
if (document.theObj.left > 500) {
document.theObj.left = -100;
}
Alright, if (document.theObj.left > 500) { looks the same as Microsoft's just without the parseInt() thing. If the objects left position is 280, then it would mean: if (280 > 500) If the position was 520, then it would mean: if (520 > 500) and it would do the next line. document.theObj.left = -100 That line sets the position of the logo if it goes past 500. Now the script works with both browsers. With that done, you need to know a few more things to make things fly around everywhere. See how the script was spaced and indented? It doesn't have to be that way. Your script could be all on one line. However, I like my script to actually be readable. In dHTML scripting, you'll run across some bugs in your script, and those bugs are a lot easier to catch and fix if it's spaced nicely. What if I wanted the logo to move to the left? Well, there's no theObj.style.right. So, you do this: theObj.style.left = parseInt(theObj.style.left) - 20 Notice how the plus sign has been replaced with a minus sign. This makes it move left. Of course, if you were to do this, you'd have to change the other numbers as well to make it fit. Next we need to talk about what other basic things you can do other than moving an object, and Netscape's Layer property. Then we'll make a nice menu with all we've learned.
|