DHTML Window Widget

Author: Dynamic Drive Note: Last updated Oct 29th, 07 to v1.1. See changelog. Description: This is a robust DHTML Window widget that replicates the look and functionality of a traditional pop-up window, minus the intrusiveness. Drag or resize the window widget on the page, minimize or close it, load a new page into it, or spawn whole new windows just as you would with popups. It's a modern, Web 2.0 alternative to pop-up windows that's less intrusive, less prone to being blocked, and much more customizable. Here are some highlights: Window interface created using DIVs and styled via CSS, making its interface highly customizable. Four types of content supported within each window: 1) Inline Text, 2) HTML from an invisible DIV on the page, 3) An external page shown inside an IFRAME, or 4) An external page on the same site fetched via Ajax. Specify various display attributes when opening a new window, such as its dimension, position on the page, and whether it's resizable or scrollable. Spawn multiple windows on the page, such as via links or automatically. Various methods supported to manipulate each window after it's been spawned, such as changing the content/page displayed, resizing or moving its position on the page. A single custom event handler "onclose" is also supported to let you run custom code when a window is closed (such as "prompt" the user whether he really wants to close it). Script tested in Firefox 1.5/2.x+, IE6+, Opera 8+, and Safari 2. Demos Directions: To add DHTML Window widget to your page, just download "dhtmlwindow.zip": dhtmlwindow.zip (consists of the below files): demo.htm windowfiles/dhtmlwindow.css windowfiles/dhtmlwindow.js windowfiles/ min.gif, close.gif, restore.gif, resize.gif Inside demo.htm, you'll find the 4 DHTML window demos shown on this page above. View the page's source to see the syntax in each case. For your Information There's very little editing required to the script files themselves. Near the top inside dhtmlwindow.js, you can change the paths to the four images used by the script's window interface depending on where they are located. The file dhtmlwindow.css controls the basic look of the windows (ie: font and handle bar colors), with any changes optional. With that out of the way, below describes the stages to adding/ using DHTML Window widget on your pages. Stage 1: Add the window widget code references to the top of your page: < rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" type="text/javascript" src="windowfiles/dhtmlwindow.js"> Stage 2: You're now ready to open a DHTML window on your page. The function to call on your page is: var uniquevar=dhtmlwindow.open(uniqueID, contenttype, contentsource, title, attributes, [recalonload]) Here are two examples, one opening a DHTML window automatically as the page loads, the other, when the user clicks on a link: <script type="text/javascript"> var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal") </script> <a href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'external.htm', 'Ajax Win Title', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Create/ Open Ajax Window</a> Notice the "recal" parameter at the end that's defined in the first example and not the second. More on this later. Below describes what each parameter of dhtmlwindow.open() does: uniquevar: Whenever you call dhtmlwindow.open() the first time to create and open a new window, you should assign it to an arbitrary but unique variable. It is through this variable that you can later invoke additional methods to manipulate the opened window. uniqueID: The first parameter of dhtmlwindow.open(), this should be an arbitrary but unique ID, used by the script to create the "ID" attribute of the window's primary DIV container. contenttype: This parameter tells the script the content type you'll be loading into the window. The four valid values are: "iframe", "inline", "ajax", or "div". See the next parameter for more info. contentsource: This parameter specifies the content itself to show inside the window, and varies depending on the former "contenttype" parameter. For "iframe" content, specify the URL to the page in question (ie: "http://www.google.com"). For "inline" content, specify the complete HTML you wish to show, though remember to backslash any special JavaScript characters such as apostrophes (ie: "<b>I\'m the window content to show</b>"). For "ajax" content, specify the relative path to the external page on your site from the current page to show (ie: "../external.htm"). And finally, for "div" content, first, define a DIV on the page with a unique ID attribute and probably hidden (using style="display:none"), then, use the DIV's id (ie: "mydiv") as the parameter;s value. title: Arbitrary text that will be shown as the title of the window. attributes: Set this parameter to toggle the various display attributes of the window when it's created, such as its dimensions, position on the page etc. Separate each attribute with a comma (,). Here they are in full force: Attribute Description width=600px Width of the window, in px. height=450px Height of the window, in px. left=30px Horizontal position of the window relative to the window viewpoint (left/top edge of the visible window). top=100px Vertical position of the window relative to the window viewpoint. center=1|0 Sets whether window should be centered on the page. If defined supersedes the left/top attributes above. 1=yes, 0=no. resize=1|0 Sets whether window should be resizable. 1=yes, 0=no. scrolling=1|0 Sets whether window should contain scrollbars (when needed). 1=yes, 0=no. recal This is an optional parameter that should only be used when you're opening up a DHTML window automatically as the page is loading (versus clicking on a link for example). By defining and setting this parameter to a value of "recal", the script will reposition the DHTML window after the document has fully loaded to take into account any scrolling of the document that might have occured prior. Remember to separate each attribute with a comma. All of them are optional, though you should at least declare the width/height attributes for a presentable window to be created: "width=450px,height=200px,center=1,scrolling=1" Stage 3: Learning how to open a window is just half the fun. Once it's open, you can continue to manipulate it, such as change the content loaded when a link is clicked, resize or hide it dynamically etc. Recall that when you open a new DHTML window, you should define an arbitrary/unique variable to contain the result: var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal") //OR <a href="#" onClick="yahoowin=dhtmlwindow.open('yahoo', 'iframe', 'http://yahoo.com', 'Yahoo', 'width=500px,height=300px,center=1'); return false">Show Yahoo</a> It is via this unique variable for each window created that enables you to continue to reference the window and modify it later using a handful or window methods. For example, to hide a window dynamically, you would call "googlewin.hide()". Below lists these methods. Method Description show() Call this method to explicitly show a window. Useful if it's been hidden (but not closed). hide() Call this method to explicitly hide a window. The window is not visible, but the contents of the window remains. close() Call this method to explicitly close a window. Contents inside the DHTML window is emptied. In order to revive this window again, you will need to call dhtmlwindow.open() again with the same parameters used to create the window initially. setSize(w, h) Resizes the window to the desired dimensions. Enter two integers, with the px unit implied: setSize(500, 600) moveTo(x, y) Moves the window to the desired coordinates on the page, relative to the viewpoint. Enter two integers, with the px unit implied: moveTo(10, 50). A special keyword "middle" can be used for either the "x" or "y" parameter to center the window in that direction: moveTo("middle", 50). load(contenttype, contentsource, title) Updates a window with new content. The parameters for load() are identical to its counterparts found in dhtmlwindow.open(). A few examples: googlewin.load("iframe", "http://cssdrive.com", "CSS Drive") wininstance2.load("inline", "New window content here!", "New title") wininstance3.load("ajax", "external.htm", "Ajax Window title") wininstance4.load("div", "faqdiv", "Div Window title") A word of caution- In general you should stick to the same content type when changing a window's content. For example, if your window originally contained "iframe " content, you should only update it with new iframe content and not content of a different type. With certain combinations it may generate an error in Firefox. isResize(true/false) Sets whether window should be resizable. 1=yes, 0=no. isScrolling(true/false) Sets whether window should contain scrollbars (when needed). 1=yes, 0=no. onclose=function(){ //your code here } A custom event handler that executes your desired code whenever the window is being closed. By returning false, you can cancel that action of closing the window. Here's an example that asks the user for confirmation when he/she attempts to close a window: googlewin.onclose=function(){ //returns false if user clicks on "No" button: var returnval=confirm("You are about to close this window. Are you sure?") return returnval } As a reminder, these methods are called on top of the window's unique variable name you've assigned it at time of creation. Lets see a couple of examples: <!-- Create links that manipulate an opened window in various ways when clicked on --> <script type="text/javascript"> var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal") </script> <a href="#" onClick="googlewin.load('iframe', 'http://cssdrive.com', 'CSS Drive'); return false">Load new site into window</a> <a href="#" onClick="googlewin.moveTo('middle', 'middle'); return false">Center Window</a> <a href="#" onClick="googlewin.hide(); return false">Hide Window</a> <a href="#" onClick="googlewin.close(); return false">Close Window</a> <!-- Define a function to create/open a DHTML window plus manipulate it further when a link is clicked on --> <script type="text/javascript"> function openmypage(){ //Define arbitrary function to run desired DHTML Window widget codes ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "volunteer.htm", "Ajax Window Title", "width=650px,height=400px,left=300px,top=100px,resize=1,scrolling=1") ajaxwin.onclose=function(){ //Run custom code when window is about to be closed return window.confirm("Close this window?") } } </script> <a href="#" onClick="openmypage(); return false">Open the page "volunteer.htm" in a DHTML window</a> All this may seem a little daunting, but it really isn't. We have a habit of being thorough. Once you understand the simple relationship between a newly created DHTML window, it's unique variable, and the methods this variable has access to, you can call and modify your DHTML windows in a myriad of ways. Don't forget to refer to demo.htm to see a more complete list of examples of launching and manipulating DHTML windows using this widget. Move over popup windows, there's a new kid in town!