2.1	All Directions

Using the same function that I showed in the first sliding example, we can create functions to slide a layer in any direction. You probably noticed in that first example that we couldn't restart the slide (without reloading). This was due to how I was stopping the slide. In the "if" statement I had an absolute value, ie:
if (document.layers["layer1"].left < 200)

Once the layer has moved to 200 pixels, the function will never execute again because the "if" statement will return false and won't do anything. To get around this you can make a separate function that will calculate a new "ending" point for every time the function is called.

function left() {
	endslide = document.layers["layer1"].left - 30;
	slideleft();
}
function slideleft() {
	if (document.layers["layer1"].left > endslide) {
		document.layers["layer1"].left -= 5;
		setTimeout("slideleft()",30);
	}
}

That first function "left()" takes the current left position and subtracts 30 from it and makes that the new ending point. Then in the "slideleft()" function, we insert "endslide" into our "if" statement. Using this function can save yourself a lot of headache. Because even if you change the starting position of your layer, you won't have to change anything in the function.

For this example, I made a function like that for every direction (up, down, left, right, and the diagonals). For the diagonals I have to use the moveBy(x, y) method:

function upleft() {
	endslide = document.layers["layer1"].top - 30;
	slideupleft();
}
function slideupleft() {
	if (document.layers["layer1"].top > endslide) {
		document.layers["layer1"].moveBy(-5,-5);
		setTimeout("slideupleft()",30);
	}
}

And then I also have another function that will re-center the layer to the beginning position:

function center() {
	document.layers["layer1"].moveTo(200,200);
}

• 2.1 Sliding Layers
  • Sliding Multiple Layers
  • All Directions

1.1 Introduction 1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript	2.1 Sliding Layers 2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images	3.1 Mouse-Click Animation 3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes
Copyright © 1997 Dan Steinman. All rights reserved.