Slide Methods

The slide methods provide an easy solution for creating simple straight-line animations. I've included the slide methods into the standard DynLayer, but initially the slide methods are not available to use. You you have to initialize the slide methods before-hand to apply the slide methods to that DynLayer. That way you can selectively choose which of your DynLayers can be slide so that a minimum amount of resources are used. Optionally you could initialize all your DynLayers to recieve the slide methods by changing the code so that it automatically calls the initialize command when the DynLayers are created.

Initialize The Slide Methods:

To apply the slide methods to a DynLayer you call the slideInit() method:


Once you do that, 2 additional methods are added to the DynLayer by which you use to slide the layer.

The slideTo() Method:

The slideTo() method will slide the DynLayer to a specific coordinate.


If you want the DynLayer to slide in a horizontal line pass null for the endy value. And if you want the DynLayer to slide in a vertical line pass null for the endx value.


To slide the DynLayer to coordinate (100,50), in increments of 10 pixel units, at 20 milliseconds per repetition:


To slide the DynLayer horizontally to the x-coordinate 80:


To pop up alert to notify when a slide is complete:

mylayer.slideTo(100,50,10,20,'alert("The slide is complete")')

When using the fn property from a hyperlink you must do a trick with the quotes:

<A HREF="javascript:mylayer.slideTo(100,50,10,20,'alert(\'The slide is complete\')')"></A>  

The slideBy() Method:

The slideBy() method will slide the DynLayer to another coordinate by defining the amount of pixels to shift from it's current location (similar to moveBy() but animated). The usage is very similar to slideTo():


If you want the DynLayer to slide in a horizontal line pass 0 for the endy value. And if you want the DynLayer to slide in a vertical line pass 0 for the endx value.


To slide the DynLayer on a diagonal 40 pixels left and 60 pixels down:


To slide the DynLayer 50 pixels to the right:


Making Sequences:

I left the fn property so that you always have a way of determining when the slide is complete. By taking advantage of this feature you can link a series of slide()'s together to make a sequence of animations. Here's an easy way to accomplish a sequence:

seq1 = 0
function sequence1() {
	if (seq1==1) {
		// commands for first part of sequence
		// link the slide back to this function to keep it going
	else if (seq1==2) {
		// commands for seconds part of sequence
	else seq1 = 0 // reset to 0 so you can play the sequence again

onSlide Handlers

I've added 2 event handlers to the Slide Methods:

I have not put these handlers to large use, but it seems to work pretty well, and are perhaps better to use than the "fn" parameter in the slideBy() and slideTo() methods.

By default these handlers do nothing, but all you have to do is reset them to some function after calling the slideInit() method:

mylayer.onSlide = mylayerOnSlide  // some function that runs each step in the slide
mylayer.onSlideEnd = mylayerOnSlideEnd  // some function that runs when completed the slide

Slide Methods Demos:

View dynlayer-slide1.html for an example with different variations of the slide methods and sequences.

View dynlayer-slide2.html for an example showing how to use the onSlide handlers.

The Dynamic Layer Object API

Home Next Lesson: DynLayer Extensions
copyright 1998 Dan Steinman

Casa de Bender