Browser Windows
Part of How Do They Do That With HTML? by Carl Tashian

Surely you've stumbled upon one of those sites that open up all kinds of new browser windows on your screen. "Please take our survey" or "Please visit our sponsor." It can be annoying when it's not expected, because it often turns into a game of Whack-a-Mole with close buttons.

People don't like new windows with extraneous garbage in them, but in some cases it's advantageous to open up a new browser window:

My only rule for making new browser windows is this: They should contain the main content of a site. If you set your site up to open a window from the start, and if everything happens within that window, people won't have a problem with it. But if a new window is just there to hold "extra stuff", consider integrating the extras into the main content window, or getting rid of them altogether (who needs extra bits anyway?). If you're trying to put advertisements into a new pop-up window, how about trying a different technique? Pop-up ads will send people away from your site in droves. (I'm not trying to lay down the law here, I'm just telling it like it is...)

The easy way to open new windows:

If you just want another window for a link, without any special features, you can do it within the link tag itself:

<A HREF="http://www.somesite.com" TARGET="whatever">Check this out</A>

Here's a link that uses this method to open my personal web site in a new window. Browser windows actually have names. The TARGET="whatever" option triggers the creation of a new window called "whatever". If you have more links that you want to send to the same new window, you could use TARGET="whatever" on those as well.

(of course, you should replace the above "http://www.somesite.com" with the URL of your own link)

Getting more interesting:

If you've gotten this far, I'm sure you want to do something more complicated than a simple TARGET="whatever" on your <A> tag. So lets do it. Start by pasting this JavaScript code into an HTML file or a new document:

<script language="JavaScript">
function newWindow(url, height, width) {
    nameW='feature'
 if (navigator.appVersion.indexOf('4') != -1) {
 // Vars for centering the new window on Version 4 Browsers
 xTop = screen.width/2 - (width/2);
 yTop = screen.height/2 - (height/2);
 window.open(url, nameW, 'height='+height+',width='+width+',scrollbars=0,resizable=0,menubar=0,toolbar=0,status=0,location=0,directories=0,left=' + xTop + ',top=' + yTop + '');
 } else {
 window.open(url, nameW, 'height='+height+',width='+width+',scrollbars=0,resizable=0,menubar=0,toolbar=0,status=0,location=0,directories=0,left=150,top=200');
 }
}
</script>

The above code simply opens a new window, given a size (width and height) and a URL to go to. The code looks complicated, mainly because it does a couple calculations before opening the window. If you're running Netscape or Internet Explorer version 4.0 and above, this JavaScript code will center the new window on your screen. With older browsers, this functionality isn't supported, but you'll still get a new window.

Now that you have the code, you can modify it to your liking. Don't worry about the size of the window or the URL it will load yet-- you'll specify those later. For now, you can modify the options on the lines that start with window.open. The options are: scrollbars=0,resizable=0,menubar=0,toolbar=0,status=0,location=0,directories=0. These options should be pretty self-explanatory, but if you don't understand what they do, you've got a good excuse to experiment with them.

To get you started, scrollbars=0 turns off (0) the scrollbar on the right side of the browser. SO if you actually want those scrollbars in your new window, simply change the option to scrollbars=1. Remember to change options in both lines that begin with window.open, not just the first one.

OK, OK, but how do I actually open a new window?

Once you have the JavaScript code from above, you can open a window from any link:

<A HREF="javascript:newWindow('http://www.tashian.com/',400,600);">enter my special site</a>.

Or you can open a window as soon as the document containing the JavaScript loads:

<BODY ONLOAD="newWindow('http://www.yahoo.com',400,600);">

Notice how I've provided the URL to open ('http://www.tashian.com/~carl'), the height of the new window (400) and the width of the new window (600) inside the actual link. This is great because you can use the same old JavaScript code from above to open windows of varying sizes and URLs from the same page.

[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian