Opening a New Window

By using JavaScript we can open a new window like the one that opened with this tutorial. To do this, first create the page you wish to pop up. Then we need to add some code to the page that you want this new page to pop up on. Here is the basic format to open the new window:

<SCRIPT LANGUAGE="JavaScript">
window.open('newpage.html','new')
</SCRIPT>

This code will open the new page in a new browser window. This code can be placed anywhere on the page that you wish the new window to pop up on. Placing the code at the top of the page will allow the new window to open sooner than at the bottom of the page.

We can configure the window by setting the size, getting rid of the tool bars, scrollbars, etc. This is the basic format for configuration (each item will be explained in a minute):

<SCRIPT LANGUAGE="JavaScript">
window.open('newpage.html', 'new', config='height, width, toolbar, menubar, scrollbars, resizable, location, directories, status')
</SCRIPT>

Here is the list of configurations and what each item means:

config='...'

This shows that what follows will configure the window. This command is actually optional and will work properly without it. But if you want to customize the window, you will need it.

height

Sets the height of the window in pixels.

width

Sets the width of the window in pixels.

toolbar

Allows you to specify if there will be a toolbar on the new window (this includes "BACK", "FORWARD", "STOP", "RELOAD", "REFRESH", etc). Set this equal to "yes" if you want one and "no" if you don't want one.

menubar

Allows you to specify if there will be a menubar (this includes "File", "Edit", "View", etc). Set this to "yes" if you want one and "no" if you don't want one.

scrollbars

Allows you to specify if there will be scrollbars or not. Set this equal to "yes" if you would like to have scrollbars and "no" if not.

resizable

Set to "yes" if you would like the user to be able to change the size of the window by dragging. Set it equal to "no" if you don't want to allow this feature.

location

Allows you to specify if there will be a location bar on the new window (this is the bar where the web addresses are displayed). Set equal to "yes" if you would like to have a location bar and "no" if you don't.

directories

Allows you to specify if there will be a directories bar on the new window (this includes bookmarks directory, etc). Set equal to "yes" if you would like to include directores and "no" if you don't.

status

Allows you to specify if there will be a status bar. (this is the bar at the bottom of the screen that displays messages). Set equal to"yes" if you would like to include a status bar and "no" if you would not.

Putting this all together will produce something like the following:

<SCRIPT LANGUAGE="JavaScript">
window.open('newpage.html', 'new', config='height=100, width=200, toolbar=no, menubar=yes, scrollbars=no, resizable=no, location=no, directories=no, status=yes')
</SCRIPT>

This will create a window with a height of 100 pixels, a width of 200 pixels, a menu bar and a status bar.

This page has been accessed

times since June 24, 2001