|
|
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:
This is some content within a DIV, shown inside this window instead
Window 1 (iframe
content)
Window 2 (inline content)
|
Window 3 (Ajax content)
Window 4 (Content from a DIV on the page)
|
Directions:
To add DHTML Window widget to your page, just download
"dhtmlwindow.zip":
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:
<link rel="stylesheet"
href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
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!
|