So You Want to Move A Layer, Huh?

…use these to jump around or read it all

[Moving the Layer]
[The Code]
[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:

1. 
   
2. 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.
3. 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.

See the Moving Layer

The Code

     Here you go…

Hey!

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:

Hey!

     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

     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

See it in Action

     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:

     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!

[Moving the Layer]
[The Code]
[Deconstructing The Script]
[Moving the Layer From Off Screen]