Bookmark to del.icio.us
FF1+ IE5+ Opera 7+
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.
Demo: A DHTML window should be visible now. Click here to launch it again.
Step 1: Add the following script into the <HEAD> section of your page:
Step 2: Add the below to the <BODY> section, preferably at the end of the page:
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!
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:
For #2, use a link like similar to this:
In both cases, the 2nd and 3rd parameter controls the width and height of the window, respectively (600,400).
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.