Windows

Creating a new window to pop open is easily done using regular HTML and the TARGET property. What about configuring those windows? Size, position, toolbars, etc... ?? That is where JavaScript steps in.

Using a simple function and a form button, here is a script to open my "page 1" into a new "regular" window. The link window will open at the default settings of the browser.

Upon clicking on the button, it activates the function called NewWindow. In the NewWindow function, a variable named MyExample contains a command called window.open. Open creates the new window to appear and displays the specified page in it.

Now that you can open a simple window, you can also specify different parameters of that window to appear (or not to appear). Here is a list of the different parameters available. They can all be set at yes or no. The WIDTH and HEIGHT parameters are set in pixels. The examples will open a window 400 pixels by 300 pixels and show the specified property as "yes".

• directories: The "LINKS" or "EXTRAS" toolbar. window.open("page1.htm","width=400,height=300,directories=yes");
• location: The address or URL toolbar. window.open("page1.htm","width=400,height=300,location=yes");
• menubar: The toolbar with FILE, EDIT, VIEW, etc.... window.open("page1.htm","width=400,height=300,menubar=yes");
• resizable: Allows the visitor to be able to resize the new window or not. window.open("page1.htm","width=400,height=300,resizable=yes");
• scrollbars: Forces vertical scrollbars to appear or not. Rarely used property. window.open("page1.htm","width=400,height=300,scrollbars=yes");
• status: The status bar along the bottom of the browser window. window.open("page1.htm","width=400,height=300,status=yes");
• toolbar: The toolbar with BACK, FORWARD, REFRESH, etc... window.open("page1.htm","width=400,height=300,toolbar=yes");
• height / width: The height n width of the new window in pixels. window.open("page1.htm","width=400,height=300");

Specifying the WIDTH and HEIGHT only, the window will automatically set the other properties to "no". Only the title bar holding the minimize/maximize buttons will be displayed on the window. To get the other settings to show, they will have to be specified as "yes".

You can combine any variation of the above to create a new window suiting your site style.

Here is the an example that shows all of the parameters in action:

That window shows the coding used to create it and I'm going to explain a couple of steps. If you closed it, just click on the button again to re-open it. It will also be used for more examples further down the page too.

When parameters are being set for a window, a NAME must be given to the window. Naming this window is just like naming a frame or image. It places a specific designation to this specific object. The NAME is specified between the URL and the parameter settings. So, the outline for opening a window now looks like this...

So, the open has 3 sections. First is the page to be displayed, second is the name of the window, and the third is the parameter settings. The open example shows all of the parameters in action, but of course you can adjust them to whatever your needs will be. The order in which they are specified does not matter, but there is one "MUST DO"... enter them without ANY spaces! Put a space in there and Netscape will not work it properly.

You can now open a window and specify what parameters it will or will not have. Is that the end? Nope. How about closing the window? If you've been following the instructions, you still have that window open from the above example. Click on the CLOSE button below the example text.

Here is the closing script that is added onto that page:

OK, that creates a closing on the page itself. What if you want to close the window from a main page (remotely)? Go up and open that full example again. Now, click on the button below.

The example window that opened was given a name of MyExample. Once that name is in place, HTML and JavaScript to use it for different effects. In this case, to close the window.

Using that NAME property, you can also change the webpage showing in the window! Go up and open that full example window (yes, again). Now, click on the button below.

The onclick event looks for the area called MyExample, then changes the location page reference to the specified one. This technique can come in handy if you are wanting to show different pages, but use only one window opening to show them.