Bride of Windows

This article looks at building dynamic displays that provide a window for content. These windows can manipulated dynamically by the user, either by dragging or using a set of control buttons.

To get an idea of how they work, try the demo where you can play around with some sample windows. You can move a window by dragging on its title bar, resize it by dragging an edge and minimize, restore or close it using the buttons provided.

Window Construction

Before going into the JavaScript code you'll need to understand how the windows are constructed. A combination of HTML and CSS is used to build a set of components that make up each window.

HTML Code

A simple HTML template is used for each window on the page. Each component consists of an element with an assigned style class and, in some cases, inline style settings. An example is shown below.

<div id="myWindow" class="window"
        style="left:100px;top:25px;width:200px;">
  <div class="titleBar">
    <span class="titleBarText">My Window</span>
    <img class="titleBarButtons" src="graphics/buttons.gif"
         alt="" usemap="#myMap" />
    <map id="myMap" name="myMap">
      <area shape="rect" coords="0,0,15,13" href=""
          alt="" title="Minimize"
          onclick="this.parentWindow.minimize();return false;" />
      <area shape="rect" coords="16,0,31,13" href=""
          alt="" title="Restore"
          onclick="this.parentWindow.restore();return false;" />
      <area shape="rect" coords="34,0,49,13" href=""
          alt="" title="Close"
          onclick="this.parentWindow.close();return false;" />
    </map>
  </div>
  <div class="clientArea" style="height:100px;">

  Your window content here.

  </div>
</div>

While external style sheets and JavaScript files can be used for the style classes and script code, each window requires this HTML to be coded in the page. In the above example, the highlighted portions indicate elements which are required but which can be customized for each individual window.

Style Classes

Each window component uses a style class to define its display properties. You can see the actual class definitions by viewing the demo source.

My Window

Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content. Sample content.

The combination of this HTML and CSS styling results in a display like that at left. Even though there is no scripting code behind this particular window, you can see how the HTML and styling provides the layout and a scrollable area for content.

Some of the style settings are required in order for the windows to behave properly while others affect only the window appearance. Properties such as fonts, colors, borders, etc. can be changed within the class definition or overridden using inline styles to give an individual window a unique appearance. The required settings are noted as needed below.

The Window Component

The ID on the outer, window-class DIV must specify a unique identifier for the window. It will be used to reference the window in the JavaScript code. This outer DIV acts as a container for the other components and the inline style should set the individual window's initial position and width.

Absolute positioning is used so that each window will float above the normal page content and can be moved at will. Initially the visibility style is set to hidden. This will be changed programmatically as the window is opened or closed.

Each window DIV should have an inline style specifying pixel values for left, top and width as shown in the sample HTML above. The ID attribute is used to identify the window and should be unique for each.

The Title Bar Component

The titleBar-class DIV contains some sub-elements for the window title text and control buttons. The text within the titleBarText-class SPAN tag is, predictably enough, the text that displays on the window's title bar.

Next is an IMG tag for the window control buttons and a corresponding image map. The name used for the IMG tag's USEMAP attribute should match the NAME (and ID) attribute on the MAP tag. The coordinates for each button area will vary depending on the actual image used for the buttons.

The titleBarButtons class defines a width and height for the button image but this is only done for convenience. It can be overridden for individual button IMG tags via an inline style.

The different alignment style properties for each of these classes are necessary to ensure that the the text always appears on the left side of the bar while the buttons image appears on the right.

The Client Area Component

This DIV contains the window contents, which can be just about anything including text, images, and other HTML code. The use of overflow:auto; in the class definition will cause scrollbars to appear as necessary.

Each client area DIV should have an inline style specifying a height in pixels.

Positions and Dimensions

Since the user will be able to move and resize each window dynamically, the left, top, width and height values set for each individual window aren't necessarily important. But they must be defined on the appropriate element to give the window an initial location and size, and for the script to function properly.

Once the windows have been set up on the page, the JavaScript code needed to control them is added. Before going into the details however, it's helpful to first understand what the code does in general rather than how it does it.

Next