FF1+ IE5+ Opera 7+

DHTML Window

Author: Dynamic Drive

Note: Feb 15th, 2007: Script now defunct. Use DHTML Window widget instead.

Description: Use this 100% DOM (Document object model) based window script to replace the default popup window in IE5+ and NS6. Drag, maximize, and close it as your mouse desires. The window can be opened two ways- directly as the page loads, or via the click of a link. And for lower end browsers (non DOM compliant), the script degrades well by launching the default browser window instead.

Note: This script is now defunct! You should use the new, much more versatile replacement script, DHTML Window widget instead. This page is simply kept for your reference.

Demo: A DHTML window should be visible now. Click here to launch it again.


Directions:

Step 1: Add the following script into the <HEAD> section of your page:

Select All

Step 2: Add the below to the <BODY> section, preferably at the end of the page:

Select All

Step 3: Finally, the script uses 3 images (the "close", "maximize", and "restore" buttons). Download the following (by right clicking, and selecting "Save As"), and upload them to your webpage directory:

Enjoy this powerful script!

Technical Notes

As mentioned, the DHTML window can be launched in two ways, just like regular windows- 1) directly as the page loads 2) via a link.

For #1, use the below script inside your page, following the codes above:

<script>
if (ns6)
window.onload=new Function('loadwindow("http://www.geocities.com",600,400)')
else
loadwindow("http://www.geocities.com",600,400)
</script>

For #2, use a link like similar to this:

<a href="javascript:loadwindow('http://www.geocities.com',600,400)">Geocities</a>

In both cases, the 2nd and 3rd parameter controls the width and height of the window, respectively (600,400).

Developer Notes

Quite a few curve balls were thrown our way while trying to create this script, without a doubt the biggest being also the most subtle. The DHTML window is constructed using an <IFRAME> contained inside a drag-able <DIV>. Since the former contains a separate HTML document, the occupied area is oblivious to the drag functionality we had defined on its containing <DIV>. As the user quickly drags around the window, the process comes to a screeching halt as the mouse invariably crosses over to the <IFRAME>. This behavior essentially rendered the drag feature useless in IE5.

A solution we came up with was simply to remove the <IFRAME> tag of the window completely (using display="none") when it is dragged, and return the tag when this action is completed. This allows for a much more smooth dragging action.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post