Bride of Windows

Script Overview

First, to deal with any browser incompatibilities, the script does some checking and stores the browser information in a global variable called browser. This is built as a user-defined object with properties to indicate the browser type and version number.

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;  // Internet Explorer
  this.isNS    = false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

This approach works well as the function can easily be modified to detect just about any browser. In fact, this same technique is used in several examples throughout this site.

Creating the Windows

The code for the windows script is designed to be independent. It can be added to any page that has the necessary HTML and CSS code and will automatically detect any windows and prepare them for use. Then, all that needs to be added is some code to open up each window.

For this, the script creates a user-define JavaScript object named, naturally enough, Window. It sets the page onload event to run an initialization function as soon as the browser finishes loading the page. This function automatically scans the document for any DIV elements using the window class and creates a Window object for each one found.

Using Window Objects

The script defines a global array variable named winList. Every Window object created during initialization is stored in this array. Any window can then be referenced using this array, specifying the window ID as the index. For example, using the HTML code from the previous page:

winList["myWindow"].open();

would call the open() method for that window to make it appear on the page.

if (winList['sample1'])
  winList['sample1'].open();

Several methods are defined for the Window object allowing it to be easily controlled via scripting. These methods are:

• open() - makes the window visible.
• close() - hides the window from view.
• minimize() - hides the client area of the window and shrinks the title bar.
• restore() - undoes the minimize effect.
• makeActive() - "selects" the window, placing it over any others. The other, inactive windows appear "grayed out."

However, since most of the window behavior is driven by user-initiated events, the open() method is usually the only one you'll need to use. This might be called from a hypertext link as show in the demo or in response to some other user action, so the user can initially open a window or reopen one after closing it.

Once a window is opened, the user can interact with it. All the necessary event capturing is set up when the corresponding Window object is created and the script provides the functions needed to handle those events.

The Active Window

The concept of the active window should be explained. Only one window is active at a time. When one of the above methods - other than close() - is called, or anytime the user clicks on or starts dragging a window, that window becomes the active one.

When a window becomes active, it is placed on top of any others on the page. The previously active window is altered visually by changing the colors of all but its content area using a predefined set of values while the newly active window is set to its original colors.

In addition to the colors, the button image may be swapped as well. If you specify a LONGDESC attribute on a window's button IMG tag, that image will be used when the window becomes inactive. When the window is made active again, the original image defined by the SRC attribute is restored.

These effects can be seen in the demo where one of the sample windows uses a custom set of colors and buttons images while the others just use the defaults.

Now on to the coding details.

Prev | Next