Dynamic Drive DHTML Scripts- DHTML Window script

New Revised CSS Library Forums Web Tools

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
<script> //DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com) //For full source code, documentation, and terms of usage, //Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm var dragapproved=false var minrestore=0 var initialwidth,initialheight var ie5=document.all&&document.getElementById var ns6=document.getElementById&&!document.all function iecompattest(){ return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function drag_drop(e){ if (ie5&&dragapproved&&event.button==1){ document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px" document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px" } else if (ns6&&dragapproved){ document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px" document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px" } } function initializedrag(e){ offsetx=ie5? event.clientX : e.clientX offsety=ie5? event.clientY : e.clientY document.getElementById("dwindowcontent").style.display="none" //extra tempx=parseInt(document.getElementById("dwindow").style.left) tempy=parseInt(document.getElementById("dwindow").style.top) dragapproved=true document.getElementById("dwindow").onmousemove=drag_drop } function loadwindow(url,width,height){ if (!ie5&&!ns6) window.open(url,"","width=width,height=height,scrollbars=1") else{ document.getElementById("dwindow").style.display='' document.getElementById("dwindow").style.width=initialwidth=width+"px" document.getElementById("dwindow").style.height=initialheight=height+"px" document.getElementById("dwindow").style.left="30px" document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px" document.getElementById("cframe").src=url } } function maximize(){ if (minrestore==0){ minrestore=1 //maximize window document.getElementById("maxname").setAttribute("src","restore.gif") document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px" document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px" } else{ minrestore=0 //restore window document.getElementById("maxname").setAttribute("src","max.gif") document.getElementById("dwindow").style.width=initialwidth document.getElementById("dwindow").style.height=initialheight } document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px" document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px" } function closeit(){ document.getElementById("dwindow").style.display="none" } function stopdrag(){ dragapproved=false; document.getElementById("dwindow").onmousemove=null; document.getElementById("dwindowcontent").style.display="" //extra } </script>

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

Select All
<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false"> <div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div> <div id="dwindowcontent" style="height:100%"> <iframe id="cframe" src="" width=100% height=100%></iframe> </div> </div> <script> //Use below code to load DHTML Window as page loads if (ns6) window.onload=new Function('loadwindow("http://www.google.com",600,400)') else loadwindow("http://www.google.com",600,400) </script>  <a href="javascript:loadwindow('http://www.google.com',600,400)">Geocities</a>

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:

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.