Opening A New Browser Window

by Amrit Hallan
Byteswoth.com
Tuesday, 9th August 2005
Sometimes you don't want the visitor to leave your current page. So when a link it clicked, instead of a new page loading on the same window, you can have the page in a new browser window. All you have to do is:

<a href="#" onClick=window.open("TheLink")>New Window</a>

This opens the link in a new browser window.

But this is a very simplistic approach, and the function window.open() has many parameters that can control the over-all appearance of your click-generated window to the world.

For example, you can have:

<a href="javascript:void(0);" onclick="window.open('TheLink', 'window name', 'location, menubar, height, width, status, resizable, scrollbar ')>Open Your Window To The World</a>

Note: you can use "javascript:void(0);" when you want nothing to happen for the href attribute of <a> tag.

Let us give proper regard to all the parameters one by one:

TheLink

Please don't take TheLink to be some keyword. In its place, you have to supply the actual link to the file you want to open in the new window, for instance, http://www.bytesworth.com.

Window Name

If you plan to use this window in one of your JavaScripts, you'll need to refer to it. So this name acts as a pointer. You often don't need the name.

Location

Location is the place in the browser window where you type the URL of a site you want to go to. If you have location=no, then the new window does not have the location bar.

Menubar

You can get rid of the menu bar by mentioning menubar=no.

Height, width

Self-explanatory. You can specify the height and width of the window to wrap around a specific text or image.

Status

the parameter - status - has nothing to do with some sort of status symbol of society. It's the bar you see at the bottom of every programs window. In your browser, the status bar often shows how many images are being loaded, or the page is being opened, or you are on a secure server (the lock), etc. If you don't want to the status bar to be visible in your new browser window, set status=no.

Resizable

The new browser window has a fixed size if you set resizable=no, and the user can manipulate the size if resizable=yes.

Scrollbar

You can make the scrollbar (the horizontal bar on the right side of your screen that has a square or a rectangular apparatus to help you move the page up and down with you mouse or some other pointing device) disappear by scrollbar=no.

So finally we can have a window like this:

<a href="javascript:void(0);" onclick="window.open('world.asp', 'location=no, menubar=no, scrollbar=no, status=no, resizable=no, height=150, width=200')>Your Window To The World</a>

Click the link below for a Demo:

Your Window To The World


Options:
Printer Friendly
Email Friend

About The Author:

Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at amrit@bytesworth.com . For further details, visit http://www.bytesworth.com You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks by sending a blank email at bytesworth-subscribe@topica.com.

Developer Categories



Developer Tutorials
ASP
CGI & Perl
CSS
Flash
HTML
Java
JavaScript
MySQL
PHP
Python
XML

Developer Documentation

Developer Tools



Search our Developer Tutorials
  The DevSyndicate Network