Dan's Layers Tutorial
4.1  Making Demos

By using different functions in a sequence you can do just about anything. To link your functions together you just simply use setTimeout()'s. 

function moverlayer1() {
	if (...) {
		...       // whatever your function does
	}
	else {
		...       // do something before starting the next function
		setTimeout("movelayer2()",500);
	}
}

function movelayer2() {
	...               // and so on...
}


Opening Windows

For most demos you'll probably want to open up a new window without any toolbars or anything. I suggest that you don't make the window too large (no more than 640x480) because people with small displays won't be able to view it properly - and you don't want to limit your audience anymore than it is.

This is a function that will open a window containing a page with the filename "page.html", name "MyDemo", and a screen size of 500x400: 

function opendemo() {
	window.open("page.html","MyDemo",'toolbar=no,width=500,height=400,directories=no,status=no,scrollbars=no,resize=no,menubar=no');
}

It's probably a good idea to check what browser people are using before starting a layers page or demo. You could add the following line to the function above to only open the demo if someone is using Netscape 4.0 and show them a message if their not. 

function opendemo() {
	if (navigator.appName != "Netscape" || parseInt(navigator.appVersion) >= 4)
		window.open("page.html","MyDemo","toolbar=no,width=500,height=400,directories=no,status=no,scrollbars=no,resize=no,menubar=no");
	else alert("You have to be using Netscape Communicator to view this page");
}


Side Notes

  1. It's a good idea to make sure that all the images on the page have been fully loaded before you start moving anything around - otherwise you'll be moving around little Netscape image boxes. You can automatically start a function after your page is loaded up by using the onLoad method in the BODY tag: 
    <BODY onLoad="start()">
    Once everything on your page is loaded it will call the start() funcion or whatever function you need.

  2. You can have several functions going at once, so don't hesitate to try it.

  3. Realize that the speed that everything will go at is directly dependent on the speed of the computer it's working on. If you time everything based on your computer's speed, it should be the same no matter what because everything will be slower equally the same amount.


Some Stuff To Inspire You...

Here are some demos that I've made. A few are rather calculation intensive so on slow machines they may get a little sluggish. Explaining every part of these demos in detail would be redundant because I basically just cut and pasted most of the functions that were explained somewhere in this tutorial. For the tricky parts I've included comments that will guide you through some of the thought process. Just view the source of the pages (right click and choose "View Source") to see how they were done.


Dan's Layers Tutorial
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.