|
And finally, back to the example with the Intrepid Digital logo:
While I'm going through this script, I recommend you open up whatever you use to create your webpages and follow along, maybe making notes along the way. First off, let's create a script only for Microsoft Internet Explorer 4.0. I find it's easier to start with MIE rather than NN. So, you begin with the basic script tags:
<script lanugage="JavaScript">
//--> I recommend you have the tags letter for letter as the above example, or you might run into some harsh Netscape problems later. Let's build a function, and call it whatever you want, I'm going to call it moveIt(). Then, we'll add the browser detection two lines onto the script before the function moveIt() If you do this, then the same browser detection can be used in other functions as well. So now our script looks like this:
<script lanugage="JavaScript">
<!--
var m = (document.all);
var n = (document.layers); //notice that these two lines are outside the function
function moveIt() {
}
//-->
</script>
The next step is to add an onLoad function to the body tag like so: <body onLoad="moveIt()"> This way the function will be triggered when everything is loaded on the page. If you wished you could also have the function be triggered by someone clicking something, or some other event, but for this example, it will begin with the loaded page. Here's something you've seen before: if (m) { Add that to the script:
<script lanugage="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
function moveIt() {
if (m) {
}
}
//-->
</script>
We want to move the logo to the right 20 pixels every tenth of a second. Then, when it gets to 500 pixels, we put it back to -100 pixels. So here's the crucial part of the script: (added parts are bolded)
<script lanugage="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
function moveIt() {
if (m) {
theObj.style.left = parseInt(theObj.style.left) + 20;
if (parseInt(theObj.style.left) > 500) {
theObj.style.left = -100;
}
}
}
//-->
</script>
Those three more lines I added are what make the logo go from left to right, and then make it do it again, over and over. Let me explain it. This line:
theObj.style.left = parseInt(theObj.style.left) + 20; First you should know that parseInt() takes whatever value is in it's paranthasees and takes the first number it sees out. If the value doesn't begin with a number, then it returns the number 0. So in the part that says parseInt(theObj.style.left) it first takes the position of the object with theObj.style.left. Let's say that the position is -100px. With the parseInt around theObj.style.left, you end up with just -100. It takes off the px. Remember when I said to not forget that MIE 4.0+ always adds the "px" to the end. parseInt() gets rid of it. So if the logo's position is 60, then parseInt(theObj.style.left) equals 60. Then you have + 20 at the end. So if it equaled 60, it now equals 80. So then, if the position of the object was sixty when the function began, then after this line:
theObj.style.left = parseInt(theObj.style.left) + 20; it's position would be 80. The logo has moved. You might have noticed that it only moved 20 pixels, but the logo actually moves 600 pixels. So how does it move the other 580 pixels? The function is in a loop, so the function just goes over and over again. The next line:
if (parseInt(theObj.style.left) > 500) {
theObj.style.left = -100;
}
if (parseInt(theObj.style.left > 500) { So, what if the position of the logo is 300 it would say. if (300 > 500) { . Right? Right. It wouldn't do what was in the brackets though. If the position was 520, then it would say if (520 > 500) { Then it would follow what was within the brackets, which positions the object by saying theObj.style.left = -100. So now you see how it moves. In the script we have now, it would only move once 20 pixels to the right, and then stop. So, for it to keep moving to the right, we need to have the function repeat itself, and have it do the function over and over again. So let's add a setTimeout to the bottom of the function.
<script lanugage="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
function moveIt() {
if (m) {
theObj.style.left = parseInt(theObj.style.left) + 20;
if (parseInt(theObj.style.left) > 500) {
theObj.style.left = -100;
}
}
setTimeout("moveIt()",100);
}
//-->
</script>
See? The setTimeout makes it so the function repeats itself over and over again. It also adds on a little delay, a 0.1 second delay to be exact. If we wanted it to go faster, we could take a zero off the 100 there. The script is now fully functional in Microsoft Internet Explorer 4.0. Let's build it in Netscape, then smash them together.
|
