Bookmark and Share

Bride of Windows

See the demo page for the finished version of the code.

Minimizing and Restoring a Window

When a window is minimized, only its title bar is displayed. This is accomplished by setting the display style of its client area to none. That causes the browser to render the window as though the client area did not exist, just the outer frame and title bar.

function winMinimize() {

  if (!this.isOpen || this.isMinimized)


  // Save current frame and title bar text widths.

  this.restoreFrameWidth = this.frame.style.width;
  this.restoreTextWidth = this.titleBarText.style.width;

  // Disable client area display.

  this.clientArea.style.display = "none";

  // Minimize frame and title bar text widths.

  if (this.minimumWidth)
    this.frame.style.width = this.minimumWidth + "px";
    this.frame.style.width = "";
  this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px";

  this.isMinimized = true;

It first saves the current window frame and text width so these can be reset when the window is restored. Next it sets turns off the client area display and sets the window frame and title text to their minimized widths, given by the window's minimumWidth property and winCtrl.minimizedTextWidth, respectively.

Remember that the Window() function minimizes the window for the first time, in order to calculate the minimumWidth value. So the minimize() function will use a null string for the width value if minimumWidth has not yet been set.

The restore() method simply resets the window's frame and title text widths to the values saved when it was minimized, and then restores the client area display.

function winRestore() {

  if (!this.isOpen || !this.isMinimized)


  // Enable client area display.

  this.clientArea.style.display = "";

  // Restore frame and title bar text widths.

  this.frame.style.width = this.restoreFrameWidth;
  this.titleBarText.style.width = this.restoreTextWidth;

  this.isMinimized = false;

Note that all the above methods other than close() use a call to makeActive() so that any of these operations will also set the window as the active one.

Setting the Active Window

The first step in making a window active is to inactive whichever window is currently the active one. That window is given by winCtrl.active.

  if (winCtrl.active == this)

  // Inactivate the currently active window.

  if (winCtrl.active) {
    winCtrl.active.frame.style.backgroundColor    =
    winCtrl.active.frame.style.borderColor        =
    winCtrl.active.titleBar.style.backgroundColor =
    winCtrl.active.titleBar.style.color           =
    winCtrl.active.clientArea.style.borderColor   =
    if (browser.isIE)
      winCtrl.active.clientArea.style.scrollbarBaseColor =
    if (browser.isNS && browser.version < 6.1)
      winCtrl.active.clientArea.style.overflow = "hidden";
    if (winCtrl.active.inactiveButtonsImage)
      winCtrl.active.titleBarButtons.src =

The makeActive() function uses the values defined in winCtrl to change the window's colors and possibly its button image, if an additional one was specified for it.

Browser Compatibility

Of special note here are two browser-specific actions. First is the use of scrollbar colors, available in Internet Explorer. While not a feature of the current CSS standards, they are used here since it does allow you to control the appearance of yet another part of the window "chrome," i.e., the window frame and buttons.

The second browser-specific action is for Netscape 6.0. Due to an apparent bug, whenever elements with scrollbars overlap they may be displayed improperly. Artifacts appear and may overlay either the element content or the scrollbars themselves.

To prevent this, the overflow property of any inactive window's client area is set to hidden, preventing the scrollbars from appearing. Therefore, only the active window displays scrollbars, if needed.

The next step of the makeActive() function is to make the given window the active one. This is done by first restoring the window's original colors and any other settings that may have been changed when the window was inactivated.

  // Activate this window.

  this.frame.style.backgroundColor    = this.activeFrameBackgroundColor;
  this.frame.style.borderColor        = this.activeFrameBorderColor;
  this.titleBar.style.backgroundColor = this.activeTitleBarColor;
  this.titleBar.style.color           = this.activeTitleTextColor;
  this.clientArea.style.borderColor   = this.activeClientAreaBorderColor;
  if (browser.isIE)
    this.clientArea.style.scrollbarBaseColor =
  if (browser.isNS && browser.version < 6.1)
    this.clientArea.style.overflow = "auto";
  if (this.inactiveButtonsImage)
    this.titleBarButtons.src = this.activeButtonsImage;
  this.frame.style.zIndex = ++winCtrl.maxzIndex;
  winCtrl.active = this;

Next, the window needs to be placed at the top of the stacking order so winCtrl.maxzIndex is incremented and the new value is assigned to the window's frame's z-index style. Finally, winCtrl.active is updated to point to this window.

Next we'll look at the code for the event handlers that let the user interact the windows.