JavaScript Application Cookbook

Application Variables

Let’s look first at the variables and other details; then we’ll get into the functions. Here are lines 5-7:

<STYLE TYPE="text/css">
#menuConstraint { height: 800; }
</STYLE>

This defines a cascading style sheet ruled with the name menuConstraint and only one property, a height of 800 pixels. This is applied to every slide created to ensure that users have enough page real estate to view the slides. In other words, if the user has a monitor resolution set to less than a height of 800 pixels, this style sheet forces vertical scrollbars. This is especially helpful if your images are long or you have a lot of copy. At least, users can scroll to see the rest. Lines 11-31 show the variables:

var dWidLyr   = 450;
var dHgtLyr   = 450;
var curSlide  = 0;
var zIdx      = -1;
var isVis     = false;

var NN        = (document.layers ? true : false);
var sWidPos   = ((NN ? innerWidth  : screen.availWidth)  / 2) -
  (dWidLyr / 2);
var sHgtPos   =((NN ? innerHeight : screen.availHeight) / 2) -
  (dHgtLyr / 2);
var hideName  = (NN ? 'hide' : 'hidden');
var showName  = (NN ? 'show' : 'visible');

var img     = new Array();
var imgOut  = new Array();
var imgOver = new Array();
var imgPath = 'images/';

var showSpeed = 3500;
var tourOn    = false;

The variables are divided into four groups:

• DHTML layer defaults

• Browser-determined variables

• Image-related variables

• Autopilot-related variables

DHTML Layer Defaults

Variables dWidLyr and dHgtLyr simply declare the default width and height of the slides. Variable curSlide ...