Smooth_slides

The goal of this page's tutorial is to show how to make a layer glide across a screen. So far, we have seen how to make a teleport from one place to another, but not to glide.

To begin with, however, we need to learn a new javascript command: setTimeout. The setTimeout command has two parameters - a string that indicates what should happen and a number of milliseconds before it should take place. For example: code format="html4strict" function delayedAlert {   setTimeout("alert('howdy');", 5000); } code If you were to call this function (from a button, for instance), then 5 seconds later, there would be a friendly alert.

media type="custom" key="2700775"

What actually happened here? The setTimeout function puts the command "alert('howdy');" onto a to-do shelf of sorts, with the reminder that 5000 milliseconds later it should execute that command. Javascript then moves onto the next step, (in this case exiting the delayedAlert function and returning false from the button), but when the time is right, it will do the alert command that was stored. Actually the setTimeout command returns an identifier number, like a claim check, when it is called. There is another method called "clearTimeout" that can send that id number and cancel the timeout command - take it off the shelf, as it were. code format="html4strict"  var timeOutId; function hideDiv {      document.getElementById("flashLayer").style.visibility="hidden"; timeOutId=setTimeout("showDiv;",1000); }  function showDiv {      document.getElementById("flashLayer").style.visibility="visible"; timeOutId=setTimeout("hideDiv;",1000); }  function stopFlashing {     clearTimeout(timeOutId); } code You will notice that we have created a variable (timeOutId) right at the start that is outside the functions. This makes it a "global variable." If you create a variable inside a set of curly brackets, it is called a "local variable" and it won't last once you leave those curly brackets. A global variable, defined with the "var" command, will last as long as this page is active. We need this because the timeout identifier gets created in the hideDiv and showDiv functions, but we need to be able to use it in the stopFlashing function to stop the process. Here's how it works.

media type="custom" key="2700819"

So to make a layer glide, we simply make it teleport over and over again, but only by a little bit. We borrow from the shifting div layers code... code format="html4strict"  var glideTimeoutId; function glideRight {        theLayer = document.getElementById("glideLayer"); theLayer.style.left = (parseInt(theLayer.style.left)+1)+"px"; glideTimeoutId = setTimeout('glideRight',20); }

function resetGlider {        clearTimeout(glideTimeoutId); theLayer= document.getElementById("glideLayer").style.left = "0px"; }

code As before, we have a global variable that keeps track of the timeout identifier. This time, however, the function that calls the timeout is actually calling itself!

media type="custom" key="2700871"

There are two problems with this:
 * 1) If you click on the glide button repeatedly, it will go faster and faster, and the reset button can't stop it anymore, although it does bring it back to zero.
 * 2) The glider will keep moving forever. It doesn't stop anywhere.

Problem one is caused by multiple timeout cycles being called (and the reset button only knows of the latest one). If you click the glide button twice, there are two sets of timeouts happening, but the glideTimoutId variable only holds onto the second one. If you clear that Timeout, the first one is still going. The more you click the glider, the faster it goes. This is neat, but impossible to stop! To fix this, we make sure that before we call glideRight again, the clearTimeout function is called. To do this, we will use a "helper function" to call the glideRight function.

Problem two can be solved by only continuing with the setTimeout function under certain circumstances. We can use an "if" statement to accomplish this. code format="html4strict"  var glideTimeoutId2=0; function startGliding {       if (glideTimeoutId2 != 0) {          clearTimeout(glideTimeoutId2); glideTimeoutId2=0; }       glideRight2; }

function glideRight2 {        theLayer = document.getElementById("glideLayer2"); if (theLayer.style.left=="") {        	theLayer.style.left="0px"; }        if (parseInt(theLayer.style.left)<500) {           theLayer.style.left = (parseInt(theLayer.style.left)+1)+"px";

glideTimeoutId2 = setTimeout('glideRight2',20); }    }

function resetGlider2 {        clearTimeout(glideTimeoutId2); glideTimeoutId2 = 0; theLayer= document.getElementById("glideLayer2").style.left = "0px"; }

code Here we have created another function, startGliding. It checks to see whether there is already a timeoutID, and if so, it cancels it. Then (regardless) it calls the "glideRight" function.

We also have introduced an "if" statement -- if (parseInt(theLayer.style.left)<500) into the glideRight function. This is the condition under which the layer should start (and continue) to glide. As soon as this becomes false, the layer will cease to move.

media type="custom" key="2700923"

If we were feeling fancy, we could add an "else" statement to the "if" in glideRight that would call a "glideLeft" function that would cause the layer to start moving the other direction when glideRight finished its glide. KITT, eat your heart out!