|
JavaScript Tip:
Put Your Window Where You Want It
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Our February 2000 Beginner Tip showed you a neat way to send all external links to a single browser window. But if you're comfortable with a little more complicated code, it's also easy to use a JavaScript function to control the size and placement of the new browser window.
Bypass A Netscape Bug
When you open a new browser window in Netscape, it's the same size as the current window and it displays directly on top of the current window! So when visitors using Netscape click on an external link, your Web site is completely obscured.
Veteran users are used to this effect, but it can confuse beginners. Although approximately 3/4 of your visitors are probably using some version of Internet Explorer, you don't want to ignore the rest.
Besides, sometimes you want to open a new window to display a page within your own site: a table of contents, a class schedule, a contact list, etc. In this case, it's even more important to control the window's size and placement.
JavaScript Syntax
Use the window.open method to open a new browser window and define its content, size, and location. The syntax goes like this:
window.open(URL,TARGET,FEATURES) |
- URL is the URL address that the link refers to.
- Target tells the browser where to open the window (this is important if your page uses frames).
- Features tells the browser where to place the new window and defines the size.
Important things to remember:
- The order of the attributes matters! You must define them in this exact order (URL, TARGET,FEATURES) for the script to execute properly.
- The list of Features should be all one string: enclose it in single quotes.
- Even if you don't specify a Target attribute to give the new window a name, you must include a placeholder - an empty string.
Write Your Function
Although you can simply include the JavaScript code inside the link, it's better to write it as a function. Then, you can call the function as many times as you want on your Web page and still have the links open in the same browser window.
This technique gives you the same benefit as using the TARGET attribute alone inside an tag, but you have much more control.
Define the function inside your page's HEAD tag like this:
A little explanation:
- The function's name is newWindow and its parameter is named newContent.
- winContent is a variable where we open the Window object and set the parameters. The value of this variable will be stored in newContent.
- The name of the new window is nextWin and it will be located in the top right-hand corner of the page. The size is 350 pixels wide by 350 pixels high.
- Depending on the purpose of your window, you may not want to use the last 3 attributes: toolbar, scrollbars, and resizable. When you include them, your visitors will see a fully-functional browser window.
Now, you're ready to call this function inside the BODY section of your Web page like this:
Of course, you can use any URL and text you want.
Test It Here!
See how it works on our page. Click on each of the 3 links below without closing the new window. You'll see each page load inside the new window while this newsletter story remains open for your reference!
Promote your site with Search Engine Power Pack.
Quickly find display errors with Browser Photo.
Speed up your pages with GIFBot.
This technique gives you much more control over your page display and layout than merely using the TARGET attribute in your HREF tag.
|
