InformIT: Sams Teach Yourself HTML 4 in 24 Hours > Moving a Layer Around with JavaScript

Moving a Layer Around with JavaScript

The only two sections of code in Figures 20.3 and 20.6 I haven't explained yet in this hour are the <body> tag in Figure 20.3 and the slide function in Figure 20.6. Together, they create the effect seen in Figures 20.1 and 20.2: the text layer flying onto the page. The <body> tag looks like this:

<body OnLoad="if (checkDHTML()) {
 layername=makeName('intro');
 yhop=-2; ygoal=20; xhop=10; xgoal=80; slide() }">

Any JavaScript commands you put after OnLoad= in the <body> tag are carried out as soon as the Web page is displayed. (OnLoad is also triggered every time the user hits the Reload button in Netscape Navigator or the Refresh button in Microsoft Internet Explorer.)

What does the JavaScript in this OnLoad attribute do? First, it starts the checkDHTML function. If this function detects a DHTML-compatible browser, the following steps are carried out:

The makeName function is given the layer ID "intro" so that it can construct the appropriate Netscape or Microsoft version of the layer name. The result is saved as layername.
The numbers -2, 20, 10, and 80 are put into storage boxes (or, if you speak math, variables) named yhop, ygoal, xhop, and xgoal. The point is to tell the slide function where you want the layer moved to and how fast to move it (more on that shortly).
The slide function is called on to "fly in" the layer.

Here's the slide function from Figure 20.6:

function slide() {
  if ((parseInt(layername.left) != xgoal) ||
      (parseInt(layername.top) != ygoal))
    {  layername.left = parseInt(layername.left) + xhop;
       layername.top = parseInt(layername.top) + yhop;
       window.setTimeout("slide()", delay) }
}

I can't teach enough JavaScript in this hour for you to be able to write your own functions like this, but you can probably get the general gist of how this function works. First, it determines whether the layer referred to by layername is already at the location specified by xgoal and ygoal. If the layer isn't there yet, it moves the layer xhop pixels horizontally and yhop pixels vertically. It then waits for a short time and goes back to the beginning of the function. It keeps on hopping until it reaches the goal.

If xhop is a negative number, the layer will hop to the left instead of to the right. Likewise, the layer will move up instead of down if yhop is negative. The bigger the values of xhop and yhop, the faster the layer will get where it's going. You can also control the length of the pause between hops by changing the value of delay. For example, adding delay=100; to the OnLoad commands just before the slide() would cause a 100-millisecond (1/10th of a second) delay between each step in the layer movement.

In the example page from Figure 20.3, the <div style> attribute initially places the "intro" layer at the x,y pixel location (-260,88). In the <body OnLoad> attribute, xgoal and ygoal are set to (80,20), while xhop and yhop are set to (10,-2). The slide moves the layer from (-260,88) to each of the following positions, one after the other, until it finally reaches (80,20):

(-250,86)    (-240,84) (-230,82) (-220,80) … etc.

I had to be very careful when I chose the values for xhop and yhop because they must reach the xgoal and ygoal in exactly the same number of steps. If I had used (9,-3) instead of (10,-2), the layer would never land on the spot (80,20) and would therefore never stop moving! When you use the slide function for your own animations, be sure to grab a calculator and make sure the two sides of the following equation come out to the same number (using the initial x,y position of the layer for xstart and ystart):

(xgoal - xstart) / xhop = (ygoal - ystart) / yhop

I could have added some JavaScript to the slide function to check this automatically, but the whole point is that Dynamic HTML functions can be pretty simple and still get the job done.

Interactive Layer Animation | Next Section

Previous Section