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.See the demo page for the finished version of the code.
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.
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>
Each window component uses a style class to define its display properties. You can see the actual class definitions by viewing the demo source.
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
and the inline style should set the individual window's initial position and
Absolute positioning is used so that each window will float above the normal
page content and can be moved at will. Initially the
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
The Title Bar Component
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.
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.