Launching windows using JavaScript
Written by
http://www.geocities.com/SiliconValley/Station/4320/
Whatever your feelings about popup windows may be, you must admit they can be very useful when used in the appropriate setting. Most of us are familiar with setting the target of a link to "_new" fo spawn a secondary browser; in this tutorial, I shall discuss using JavaScript to facilitate the launching of windows. Let's just say things can get a lot more interesting that way.
JavaScript can help load 3 kinds of windows:
-Regular secondary window
-Modal window
-DHTML window
Regular secondary window
This is similar to using the target_new attribute inside a link, except you
get to customize virtually every aspect of the window. The basic command is:
<script>
window.open("http://www.yahoo.com")
</script>
You can configure how this window will appear, by inserting one or more of
the below keywords into the method's 3rd parameter:
| width |
height |
toolbar |
resizable |
| scrollbars |
directories |
status |
menubar |
Below I show how to launch a window with dimensions 500x400 and nothing but the status bar through a button:
"status=1" tells the method to display the status bar;
"1" is the computer equivalent of "yes".
Manipulating the window
Allow me at this point to deviate a bit from the main topic and discuss a few
things you can do to a window once its opened. How would you like to use
scripting to reload or close a window, even move it around! Thanks to a variety
of window methods, you can!
-window.location.reload() //reloads window
-window.close() //closes window
-window.moveTo(x,y) //moves window to specified location
-window.moveBy(x,y) //moves window by specified offset
-window.resizeTo(x,y) //resizes window to specified dimensions
-window.resizeBy(x,y) //resizes window by specified amount
To use these methods on the current window, simply call them as is on the
page. You can also use them on the opened window, by following these two steps:
Step 1: When opening a window, assign a variable to it:
mywin=window.open("http://www.geocities.com")
Step 2: Use this variable to reference the opened window, then apply
the desired method on it:
mywin.location.reload //reload mywin
mywin.moveTo(0,0) //positions window at upper left corner of monitor
Ok, getting back on track...
Modal Window
Modal windows are a fun Internet Explorer specific feature. The window sits
"focused" on the page until the user clicks on the close button. The
window does not go into the background no matter what (for example, clicking on
the main window).
Notice how I use dialogWidth and dialogHeight to specify the window's
dimension. You also need to specify the unit, which in this case I use px.
DHTML Window
A new type of window is emerging, one I thought is worth mentioning. It is
now possible to re-create the entire window interface through JavaScript and
DHTML. The result is a less intrusive, inline popup window.
The demo is based on the impressive DHTML
window from Dynamic Drive, where
you can get the source for it there.
Another illustration of a DHTML window is Scott Andrew's DOM
window
|
