UPDATE: The source code can now be found here.

With just a small knowledge of JavaScript mixed with some browser concepts, you can easily put together a web page that includes dynamic, moveable windows that you can collapse to just a title bar.

Before getting into the details, I'll show you an example, and some plug-and-play HTML that shows how to use it, in case you want to skip the details.

The figure below is the sample dragwins.html file that demonstrates the windows. This sample initially creates one window containing custom content, which is on the left. The sample also includes a link that dynamically creates new windows; I created two of them, shown on the right.

These windows can be dragged around, and they can be moved from back to front (by clicking on one). And they can be collapsed to their title bar, as you can also see in the lower-right of the figure.

Plug and Play

I wrote this code so you can easily use it in your own pages and specify your own content to put inside the draggable windows. The code includes style classes and JavaScript code. The styles are important because the code tests the style class names to know which elements are the draggable elements. You're free, however, to change the look (such as fonts and colors) of the styles.

To use the code in your own page, download the sample code. Copy the style section into the head of your own page (or into a separate stylesheet .css file), and copy the JavaScript code into your own page (or into your own separate .js file). Also save the two attached GIF files.

To add a window to your code, create a DIV tag containing the HTML that you want to place inside the window. Make the DIV tag invisible by setting its display style to none, and include an ID for the tag, like so:

 <div style="display:none" id="FirstContent">

<div style="font-size:12px;font-family:Arial,Helvetica,

sans-serif;background-color:#E0E0E0;padding:5px;height:300px;">



Some html that will appear



</div>

</div>

I used two DIV tags here; the outer one includes the ID and display setting. The inner one is optional, and is where I specify the styles I'm using in the HTML. (Don't combine these into a single DIV tag, as any styles in the outer DIV tag are ignored.)

Next, call the CreateDropdownWindow function to create the window, like so:

<script type="text/javascript">CreateDropdownWindow('My Window', '300px',

true, 'FirstContent');</script>

The first parameter to the function is the title to appear in the draggable window. The second parameter is the width of the window, as a string, including the units. The third parameter is a boolean specifying whether the window can be dragged. The fourth parameter is the ID (as a string) of the DIV tag you created earlier containing the content.

That's it! You can also generate the windows dynamically at runtime by calling the CreateDropdownWindow in response to a user action. For example, you can use an A tag to call the function like so:

<a href="javascript:CreateDropdownWindow('Window', '400px', true,

'FirstContent)">Create another window</a>

The sample code that you can download is an HTML file that demonstrates both adding windows dynamically and statically specifying a window.

Note: The JavaScript code has two .gif filenames hardcoded into it, and I've included them in the download. These are the buttons that appear in the upper-right corner of each window. When the window is expanded, the button has a little white bar at the top, and when the window is collapsed, the button has a little white bar at the bottom. You're free to substitute these with your own images.

>>> More Techniques Articles          >>> More By Jeff Cogswell