Opening and Manipulating Windows

If you have ever been near any of the homepages in Geocities or Tripod, you must be familiar with the small window that pops up with an advertisement banner. Undoubtedly, you considered it irritating and in bad taste.  I agree they can be anoying but they have there uses.

Pop-up windows are usually used when you want to display something to the users but you don't want them to leave the page that they are currently viewing (Perhaps you are afraid that they might not return).

Click here to see an example of a Javascript activated window.

Let us now look at the code used to create that link.

<A HREF="" onClick="window.open('index.htm', 'indexWnd', 'width=370,height=240,status=1'); return false;">click here</A>

  Note that I am using single quote for nested strings. The 'return false' part tells the browser that when the user clicks on the link, the browser should stay on the same page rather than load the page specified by HREF. The onClick() handler calls the window.open() function to open a new browser window. The first parameter, 'index.htm' is the URL of the file to load in the new window. So our window displays index.htm when it opens. (Note that it doesn't have to be an HTML file. It could also be an image file or anything the browser can display.) The second parameter, 'indexWnd' is the name we wish to give to the new window. Details about this later. The third parameter determines the dimensions and appearance of the window. We have specified a window of size 370x240 and a status bar. Note that it is a comma-seperated list. The apperance of the window can be controlled by changing the value of the third parameter. The commonly used options are:

height

Height of the new window in pixels
(eg: height=100)

width

Width of the new window in pixels
(eg: width=200)

directories

Specifies whether to display the browser directory buttons like "What's Cool" etc.
(eg: directories=yes)

hotkeys

Enables or disables various hotkeys
(eg: hotkeys=no)

location

Specifies whether the "Location" box is to be displayed
(eg: location=yes)

menubar

Specifies whether the new window should have a menu bar
(eg: menubar=yes)

resizable

Specifies whether the user is allowed to resize the new window
(eg: resizable=no)

scrollbars

Specifies whether the new window can have scroll bars if necessary
(eg: scrollbars=yes)

toolbar

Specifies whether the new window has a toolbar
(eg: toolbar=yes)

Instead of yes/no values, you may also give 1/0. i.e., you may write toolbar=1 instead of toolbar=yes.

Here are some combinations that you can try for yourself. All of them open this document in a new window with different functionalities.

<A HREF="" onClick="window.open('windows.html', 'newWnd', 'width=500,height=400'); return false;">Try this</A>

Try this
A basic window. No menu, no toolbar, no status bar, not even scroll bars.

<A HREF="" onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes'); return false;">Try this</A>

Try this
A window with menubar, location box and scroll bars.

<A HREF="" onClick="window.open('windows.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=1,resizable=1'); return false;">Try this</A>

Try this

A window with toolbar, statusbar and scroll bars. You can resize this window if you want which wasn't possible with the other windows.

In the above code samples, I have split the code to multiple lines for easier reading but when you use them, make sure that everything between the double quotes is on a single line.