Window Sizing

Lets take a look at the window from the last lesson. See how thin and long it is compared to the average pop up window? That's because I sized it to 100 pixels wide and 300 pixels long. I did this by using "height" and "width" in my "window.open()" statement.

lovechild = window.open("childpage.htm", "lovechild", "height=300,width=100");

This is the third and last thing you can put in the "window.open()" parentheses. Styling stuff. Look over the code above again. Notice that each section -- URL of page to load, HTML name, and styling -- each have their own set of quotes around them. Each of these three major sections is delimited (separated) by a comma. You can add a space, too, if you'd like. It does help make things easier to read.

Next, notice how "height" and "width" are coded. They are both inside the same quotes and separated by a comma only, no spaces. Finally, notice how the value is applied with equals signs (=). The "300" and "100" are recognized by JavaScript as pixels. No extensions are needed.

One last thing. If you choose not to use an HTML window name in the parentheses, you still need to add empty (no spaces) quotes and commas:

lovechild = window.open("childpage.htm", "", "height=300,width=100");

Stop right now and make a page that opens a sized child window. It's very important that you get the syntax down because there's a lot more styling to come that will go in that last set of quotes with "height" and "width".

Next, we'll make it so the window cannot be resizeable. That is, the viewer cant expand the window with the Maximize/Resore button or stretch it by grabbing onto a window border. That's done using "resizeable":

lovechild = window.open("childpage.htm", "lovechild", "height=300,width=100,resizeable=0");

This would prevent the viewer from being able to resize the window. You can allow resizing by setting "resizeable" to a value of "1". In all the styling that is to follow, "0" means "no" or "off", and "1" means "yes" or "on".

You can also use the terms "yes" and "no", but these values require quotes. Since the whole mess is already in double quotes, you'd use single quotes to house "yes" and "no". This gets confusing. It's a lot easier just to use "0" and "1" because you don't have to diddle with single quotes.

Anatomy Of A Browser Window

Below is a list of window components that can be turned on or off with JavaScript. The list is ordered from the top of the window down. Save this list. It makes a handy reference.

menubar -- This is the bar with "File" and "Edit" in it.

toolbar -- The basic button bar used for navigation.

location -- The address bar where you type in URLs.

directories -- All of the cute little add on buttons and custom toolbars.

scrollbars -- The bars that allow you to scroll up, down, and across a page.

status -- The narrow status bar at the very bottom of the window.

You cannot remove or style the very top bar called the "title" bar. It's sort of permanent.

Window Styling

Now that we know our window's anatomy, lets turn everything off except for the "title bar" which we can't do anything about.

lovechild = window.open("childpage.htm", "lovechild",
"height=300,width=100,resizeable=0,
menubar=0,toolbar=0,location=0,
directories=0,scrollbars=0,status=0")

It may not be so apparent in the above example, but there are no spaces between the window components' styling. Just commas. The above code turns off all window features.

Lets turn the address bar (location) back on:

lovechild = window.open("childpage.htm", "lovechild",
"height=300,width=100,resizeable=0,
menubar=0,toolbar=0,location=1,
directories=0,scrollbars=0,status=0")

Just remember that "0" turns things off and "1" turns them on.

Default Styling

If you don't code any change in the new window, it will pop up with the same styling as the parent window. Scrollbars are automatic by default. Otherwise, the veiwer's preferences prevail.

Exercises

Go wild! Make windows of varying sizes with different features that are enabled or disabled. Turn off all features and turn them on one at a time in both browsers to get a better idea of what each statement does.