 |
 |
|
|
||
We receive many personal emails with questions relating to popup windows. Thus, this article. I've written other articles, tips, and an ebook related to popups. You can find them at http://willmaster.com/a/8/pl.pl?87parts, http://willmaster.com/a/8/pl.pl?87ptips, and http://willmaster.com/a/8/pl.pl?87ebook, respectively. They, however, are more or less specialized. The ebook, for example, provides the JavaScript code for three different popup windows: (1) a "no clicks required" information delivery system, (2) a professional way to present images within popups without maintaining separate HTML pages, and (3) image map triggered popups. This article, rather than focusing on specialized uses, attempts to provide a basic understanding of how popups work. Here is the basic JavaScript popup window code: window.open(URL,Name,Properties) "URL" is the URL of the HTML file with the content to be displayed in the popup window. "Name" is a name you give to the popup window if you want to reference the popup in <form...> or <a...target="Name"> tags. If you will not reference the window, then Name can be a null string. (A null string is a pair of apostrophes or a pair of quotation marks with nothing between them; i.e., '' or "") Because referencing is beyond the scope of this article, the Name will be specified as a null string in all working examples of this article. "Properties" is optional, yet is the focus of at least half of this article. Properties lets you control the appearance of the popup window, such as its size and whether or not it may have scrollbars. (If no optional Properties are specified, you get a new browser window instead of a popup window.) Before describing the optional Properties, let's talk about how to launch a popup window. After all, there is no sense in describing the available options if you don't know how to launch the popup in the first place. Launching Popup Windows To launch popup windows, put your JavaScript popup window creation function into the HEAD area of your HTML page. Then launch the popup with either the onLoad=... command in the <body... tag or with an <a... anchor tag. Here is a basic custom function for your HEAD tag:
<script type="text/javascript" language="JavaScript">
<!—
function Popup() {
window.open(...);
}
//—>
</script>
(The ... in the above custom function is a placeholder for the URL, Name, and optional Features. Working code replacing the ... is later in this article.) To launch the popup with the onLoad= command, put this into your <body... tag: onLoad="Popup()" To launch the popup with an <a... tag, do something like this: <a href="javascript:Popup()"> Click Here </a> Note that the custom function name does not have to be "Popup" but can be any sequence of alphanumeric characters, including underscore. There is another method using the <a... anchor tag, a method that allows you to dispense with the custom function in the HEAD area. The reason you can dispense with the custom function is because the JavaScript window.open(...) function is in the <a... tag itself. Here is an example: <a href="#" onClick="window.open(...); return false;"> Click Here </a> (Again, the ... in the above code is a placeholder for the URL, Name, and optional Features.) The reason for the "return false;" code is so the browser won't try to load the URL "#" in the href attribute. The URL "#' means go to the label on the page named following the "#" character. Without a name following the "#" character, the browser would normally go to the top of the page. Okay, you know several different ways to launch a popup window. Now, let's replace the ... in the window.open(...) function with working code. The following assumes you have an HTML page that will be displayed in the popup window called display.html:
window.open('display.html','');
Because no optional Properties are specified, the above code will open a new browser window with your display.html in it. When any optional Properties are specified, a popup window with display.html is launched instead. The Optional Properties The optional Properties can be used to specify your popup window's size, whether or not it will have a menu bar, and so forth. The Properties are all on one line and separated with a comma. There may be no spaces in the line. The list of Properties is enclosed between apostrophes or quotation marks. For example,
window.open('display.html','','height=100,width=200');
will display your page in a popup 100 pixels high and 200 pixels wide. Here is a list of Properties you may assign to your popup windows:
Which of the above Properties you should specify is determined by the purpose of your popup window. For example, if your credit card authorization service requires order forms to be on one domain, yet you want to sell product from another, you could have your form on the required domain and display it in a popup window. In this case, you might not want the URL to be viewable in the address bar, so you would specify location=no. But the other Properties could all be ______=yes, except the height and width. If you do not specify height or width, the browser will display its default size which, in this scenario, would probably be appropriate. With JavaScript version 1.2, additional Properties may be specified. Note that only the latest browser versions support JavaScript 1.2. The additional properties are:
Assigning Popup Window to a Variable Assigning the popup window to a variable can give you some additional control: MyWindow = window.open(...); If you launch only one popup window from your page, then assigning it to a variable is rarely necessary. But it doesn't hurt to do so. If you launch more than one popup window from your page, you'll probably want to assign each to a different variable: Pop1 = window.open(...); Pop2 = window.open(...); If both popup windows were assigned to the same variable name (or no variable is assign) then the second and subsequent popups will use the same popup window as the first. Of course, in some situations that behavior may be desired. Assigning the popup to a variable will also allow you to close the popup from the page that created it:
Pop1 = window.open(...);
setTimeout("Pop1.close",9000);
The above code creates a popup window and assigns it to the variable Pop1. Then the JavaScript function setTimeout() is set to close the popup window after 9 seconds (9000 milliseconds). Those are popup window basics. It should be all you need to make simple popup windows. Additional information and specialized applications can be found at the URLs mentioned above. The home of JavaScript, Netscape.com, has information at http://developer.netscape.com/ for those developing with JavaScript. JavaScript download sites such as http://javascript.internet.com/ have code snippets that much can be learned from. Much can be done with popup windows. Have fun! Copyright 2001 William Bontrager
| ||