So You Want to Move A Layer, Huh?
http://www.htmlgoodies.com/beyond/dhtml/article.php/3470441/So-You-Want-to-Move-A-Layer-Huh.htm (Back to article)
[Deconstructing The Script]
[Moving the Layer From Off Screen]
First Things First: We're dealing with Layers here so you'll need to be running a Netscape Navigator browser version 4.0 or better. If not...error.
Every now and again I get an email asking how people get things to fly around their screen. When I am given an URL to look at, I find that a good bit of the time, it's a layer set up to follow a path across the browser screen. It's actually easy enough to do.
Here I'll show you two things:
- The first is a basic JavaScript that sets a path for a Layer to follow. The script is very easy to play with to get all kinds of different paths.
- The second is the same script using negative numbers to have the layer roll in from off of the screen. On that layer will be a link that controls what shows up on the screen. Very neat.
Moving the Layer
OK, here's a simple script that moves the Layer. You can set the path of the layer, the speed of the movement, the size of each movement, and where the layer stops, if you want it to stop at all. I have it set up to stop.
The Code
Here you go...
<SCRIPT LANGUAGE="javascript">
x=1
y=1
function moveIt()
{
x=x+2
y=y+2
document.layers[0].moveToAbsolute(x,y)
if (x >= 100)
{document.layers[0].stop}
else
{setTimeout("move()",5)}
}
</SCRIPT>
<BODY onLoad="moveIt()">
<LAYER NAME="bigLayer" BGCOLOR="ff00ff" HEIGHT="100" WIDTH="100" LEFT=1 TOP=1>Hey!</LAYER>
Deconstructing the Script
The easiest way to roll through this script is to start with the Layer first. Once you have that, we can start moving it around. The code looks like this:<LAYER NAME="bigLayer" BGCOLOR="ff00ff" HEIGHT="100" WIDTH="100" LEFT=1 TOP=1>Hey!</LAYER>
If the code is foreign to you, try reading my first Layer tutorial before you get into this one. It'll make your life a little easier.
And so we start...
- LAYER starts off the Layer.
- NAME="bigLayer" assigns a name so we can attach the JavaScript to it.
- BGCOLOR="ff00ff" HEIGHT="100" WIDTH="100" are used to assign a few basic parameters to the Layer.
- LEFT=1 TOP=1 are used to assign the layer a starting position. The pixels down from the top and in from the left denote the layer's upper-left hand corner. All pixel settings will be relative to that corner of the Layer.
Please Note! These numbers are important to the appearance of this script. You'll need to make a point of getting these two number equal to the "x" and "y" numbers in the script itself. I'll get to why in a moment, I just want to make you aware of it right now.
The Script
<SCRIPT LANGUAGE="javascript">
This should look familiar. That starts off every JavaScript, and this is a JavaScript.
x=1
y=1
Remember I told you about this in the section just above? These are the starting coordinates of the layer's upper left hand corner. These numbers should be the same as the numbers set in the Layer itself. If they're not, then you're going to get a bit of a jump before the script kicks in.
The layer will first appear where LEFT and TOP settings place it, then jump to where these x and y coordinates say it should be. See the problem? Get the numbers equal and you'll get a nice smooth start. If you want to see what I mean, try setting the numbers to different values and running the script. You can always change it back later.
function moveIt()
{
x=x+2
y=y+2
Here's where you control the movement of the Layer. The coordinate "x" denotes the Layer's movement to the right. The "y" coordinate controls the
Layer's movement downwards.
Right now I have it set to move in a perfect 45 degree line down across the page. For every two pixels to the right, the block also moves two pixels down. That happens again and again and the Layer moves down the line.
You could also try:
- x=x+2 y=y+0: Movement straight across the screen.
- x=x+0 y=y+2: Movement straight down the screen.
- x=x+2 y=y+1: Lesser angle across the screen.
- x=x+6 y=y+0: Heavier angle across the screen.
document.layers[0].moveToAbsolute(x,y)
Here's the magic. This line actually moves the layer to the next point set up by the adding of numbers to x and y.
if (x >= 100)
{document.layers[0].stop}
else
{setTimeout("move()",5)}
This is a conditional statement that allows you to stop the layer at a certain point.
The first line states that if x becomes greater than or equal to 100, then something should happen. Now, I chose 100 out of the clear blue sky. You can set it to any thing you want. The higher the number, the longer the Layer will move. How quickly you get to the number also depends on how quickly "x" adds up. Remember that earlier we set up "x" to have 2 added each time the script rolls through. That means after the script ran 49 times (it wouldn't have run the 50th time), the script stops and the Layers stops. Get the concept? The higher the number, the longer the script will take to reach it and the longer the script will run moving the Layer across the screen.
One more thing. I have this line set up to read as "greater than or equal to" because I found out the hard way that setting this line so that "x" has to equal a specific number is bad. I first had it so that "x" was suppose to equal 100 to stop. The problem was that I has it so that only one was added each time. That means x was 99 and then 101. It never did get to equal 100. Oops. Stick with the "greater than or equal to" format.
When the script is running, if "x" has not yet reached at least 100, then the function rolls through again thanks to the setTimeout() command. See the "5" after the comma? That is a measure in 1/1000ths of a second of how long the script should wait to run again. Higher numbers scroll slower. This Layer moves pretty quickly because it gets bumped up every 5/1000ths of a second.
}
</SCRIPT>
Finally the curly bracket rounds out the function and the script comes to an end.
The script is triggered to run through the use of an onLoad event Handler in the BODY command: onLoad="moveIt()".
Moving the Layer From Off Screen
This is becoming a popular effect. In fact, this is being asked for more often than just the simple moving layer. I'm using the same script as above with just a few simple changes. I also added a link
OK, that's pretty smooth, you have to admit. Before I show you the code, let's think it through.
- We want the layer to roll in from off screen.
- All positioning statements deal with the upper left hand corner of the layer.
That means the left hand corner will need to be off of the screen at least the width of the Layer itself (100). OK, so let's set the "x" point to -100.
Set the LEFT in the layer to minus 100 too!
- We want the Layer to come straight in without moving at any angle.
That means we'll set the "y" setting to zero.
- We want the layer to scroll in from the middle of the left hand side.
So we'll set the "y" to 200. Set TOP in the Layer to 200 also!
- We want the Layer to stop after it comes onto the screen so that we don't see past the
layer on the left hand side.
We'll get that by setting the point at which the Layer stops as (-1). Zero would show a little on the left. This way the left hand top of the layer stops one pixel off of the screen. Now we'll have to make sure that "x" will actually equal (-1). I did by adding one to "x" each time the script loops.
That should do it, and it does. Here's the script:
<SCRIPT LANGUAGE="javascript">
x=-100
y=200
function move()
{
x=x+1
y=y+0
document.layers[0].moveToAbsolute(x,y)
if (x == -1)
{document.layers[0].stop}
else
{setTimeout("move()",25)}
}
</SCRIPT>
The link on the Layer is just a normal hypertext link except I put TARGET="main" in the code. That's it.
The script is triggered again by an onLoad Event Handler in the BODY tag. Great effect.
That's That
This is a very basic script. It has limited movement. Play with it. See if you can get it to do different things. If you get a new and strange layer movement, send it to me. Maybe I'll post it here - who knows?Enjoy!
[Deconstructing The Script]
[Moving the Layer From Off Screen]
