Javascripts 3a Popups 2 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
JAVASCRIPT 3A

POPUP TUTORIAL - PARAMETERS

The popup's properties are set in the open() command. Specifically, the properties of the popup are set in the third argument for open() which is a list of properties for the popup, starting with width & height. Properties are set like this: the name of the property followed by an equal sign followed by the value and separated by commas. The entire list of properties goes inside quotes.

Because of a bug in Internet Explorer, it is important that you do not put any spaces in the list of properties.. For example, the following line of code:

window.open(href,windowname,width=500,height=250,scrollbars=yes');

will set the width to 500, the height to 250, and turns the scrollbars on.

The width & height properties are essential. All other properties are optional. I haven't included them all, just a few to get you started as I didn't want to make this mini-tutorial too long. Just click each link for an explanation of how each works:

width & height	Dimensions of the popup
left & top	Top and left side distance
scrollbars	Scroll bars
location	Location bar for the URL

PARAMETERS

Please note the single quotes where used. Sometimes they are a bit hard to see but they must be used or nothing will work. And make sure that everything after window.open is in brackets. If the code doesn't work, these are the first things to check.

width and height are the only required properties for a popup window. This line in our popup script creates a popup that is 500 wide and 1000 high. Why so high? It also includes the code for the web page you need to make for your popup:
```
window.open(href, windowname, 'width=500,height=1000,scrollbars=yes');
```

left & top

left and top set the position of the popup on the screen. If you don't put left and top the browser puts the popup where it wants. For example, this command puts the popup 50 px from the left of the screen and 100 px from the top:
```
window.open(href, windowname,'width=250,height=150,left=50,top=100,scrollbars=yes');
```

scrollbars

By default popups don't have scroll bars. This is a problem if the content of the popup takes up more space than the first page. It's usually a good idea to set the popup with scroll bars. Set the popup with scroll bars by setting the scrollbars property to yes.

So, for example, this open() command in the popup script opens a popup with scrollbars:
```
window.open(href, windowname, 'width=400,height=150,scrollbars=yes');
```
In situations where a scrollbar isn't actually needed because the content doesn't fill up even a single window, IE and Netscape handle things a little differently. IE puts a greyed out scroll bar, Netscape doesn't put any scroll bar at all. Neither of them puts a horizontal scroll bar in the window if it is not needed.

location

The location bar is where the URL is displayed at the top of the window. By default popups don't have location bars. To configure the popup so that it has a location bar set location to yes in the open() command.

So, for example, this command in the popup script opens a popup with a location bar:
```
window.open(href, windowname, 'width=400,height=150,location=yes,scrollbars=yes');
```