We put the customer's needs before the technology



		News



		Portfolio



		Products



		Services



		Resources



		Contact Us

ColdFusion:
Components
Computer Primer:
Bit/Byte/Kilobyte
Download Calculator
Design Primer:
Color Picker
Images:
Free use images
JavaScript Primer:
Forms
Popup's
Redirect Select
UUID Class
PHP
Graphing Tool
SQL Toolkit:
Download/Info
Documentation
Changelog
Demo
Just for fun:
TV width & height

JavaScript Popup Primer

Introduction
The Code
Issues
Usage
On Page Load
As a Link
Close Code

Introduction

This will explain one way of making a popup window. There are more ways of doing it, and different schools of thought on each one. This is my way, if you don't like it, you can do it your way.

The Code

Line numbers: On or Off (Turn numbers 'Off' before trying to copy the code)

1. <script type="text/javascript" language="JavaScript">
2.  <!-- 
3.   function pop(url,width,height){
4.    popup = window.open(url, 'popup', 'width=' + width + 
                          ',height=' + height + ',scrollbars=no');
5.    popup.focus();
6.    return;
7.   }
8.  //-->
9. </script>

Here is what each line of the code does:

Tell the browser that JavaScript is coming
Suppress JavaScript code from browsers that do not support it
Declare the function to drive the popup
Create a new window called pop with the attributes specified and point it to the url requested
Make the new window come to the front (in case it's in the back somewhere)
Cleanly exit from the function
Close the function
Stop hiding from older browsers
Tell the browser that we are done providing JavaScript and to begin processing from here on as HTML

NOTE: changing the string provided at end of line 4 can turn on and off things like toolbars etc.

Issues

If you open a window at 200x200 pixels, and then try to open another window at 300x300 pixels, the window will not grow in size. The first window must be closed completely.

Making modifications to the names of the windows, which solves the problem of the above problem, destroys the close code. In that case, only provide tools for closing windows from within themselves using self.close()

Usage

To use the code, you must invoke this JavaScript function with 3 parameters.

pop(url, width, height);

url

This is the page that you want to go to. It may be a relative link or absolute

http://www.google.com/
/images/myimage.jpg
docs/folder.php

width This is an integer value in pixels that the window width should be. The measurement is the viewable page space on most web browsers. The browser may add width to the actual window size depending on operating system etc. If scroll bars display, they will cut into the page area.

height This is an integer value in pixels that the window height should be. The measurement is the viewable page space on most web browsers. The browser will add height to the actual window size to display page title and window management features. If a scroll bar displays, it will cut into the page area.

On Page Load

To open a new window on a page load, substitute this for your body tag.

<body onload="pop('http://www.google.com',300,200);">

As a Link

To drive a popup from a text link

<a href="javascript: pop('http://www.google.com',300,200);">link text</a>

An example of this in action.

Close Code

To close this popup from any web page either the calling window or from within itself:

<a href="javascript: popup.close();">close window</a>

because we named this window popup, we can invoke the close() method on it at any time, from any window.

Try this example if you have this pages popup open.

Optionally from within the popup you can also use self.close(); which will close whichever window the link is in.

Program as used in this license may refer to entire software packages, code snippets and binary image or visual information.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

AF-Design, 506 10th Ave SW, Rochester, MN, 55902 / Tel: 888-762-1056 / Fax: 888-845-8898