Monday, January 21, 2008

Control New Popup Windows - Websites

All of this is
easy to do. The trick is to manipulate the window’s components
through JavaScript. Here’s how to gain control over window components.
First, inside your script, include the window.open method, and
add, as arguments, the URL and a name for the new window. For
example, the code window.open ("http://www.pcmag.com/",
"PC Magazine") opens the PC Magazine Web site in a
new window and places the text PC Magazine in the title bar
of that window. You don’t actually need the title bar text,
but it’s useful to help orient the user, and also because by
using different names you can include several different windows
in the same HTML document.

Now that you have
the window in operation, you can tailor its components. To do
so, add a third argument to the window.open statement, this
one enclosing one or more options in one set of quotation marks.
(It’s important to note that if you put anything in the third
argument, you must spell out all of the features you want. The
features have default values, but if you enable only some, the
ones not defined will be disabled. (See The MSDN Library.)

These options
must be separated by commas, but without a space following the
commas. Here are the available options:

· channelmode—The
new window is displayed in theater mode and shows the channel
band.

· directories—The
new window displays the Links bar in IE or the Personal bar
in Navigator.

· fullscreen—The
new window displays the browser in full-screen mode, hiding
the title bar and menus. If you use this, be sure to give users
a button or other obvious way to close the window.

· height—The
new window’s height is set to the specified number of pixels.

· left—The
new window’s position is set in pixels, relative to the top-left
corner of the screen.

· location—The
new window displays the address bar.

· menubar—The
new window displays the browser’s menu bar.

· scrollbars—The
new window displays vertical and horizontal scrollbars when
necessary (excluding them can make content inaccessible).

· status—The
new window includes a status bar at the bottom.

· toolbar—The
new window displays the browser’s toolbar (making toolbar buttons
such as Back and Forward available).

· top—The
new window’s position is set in pixels, relative to the top-left
corner of the screen.

· width—The
new window’s width is set to the specified number of pixels.

· resizable—The
new window can be resized by the user.

Here’s an example.
The following code would open the PC Magazine site in a new
resizable window showing only the toolbar:

window.open("http://www.pcmag.com/",

"PC Magazine", "toolbar=yes,resizable=yes")

Note that the
value "yes" can be replaced by "1", and
that if you omit the value entirely the browser will assume
"yes" or "1".

The following
sets the height and width of the new window, makes it nonresizable
(by leaving out the resizable option), and displays the menu
bar, the location bar, and the scrollbars:

window.open("http://www.pcmag.com/","PC
Magazine",

"menubar=yes,location=yes,scrollbars=yes,

width=628,height=333")

Internet Explorer
and Netscape Navigator, versions 4 and later, handle the height
and width options differently. In IE 4 and later, you can specify
height, width, or both; in Navigator 4 and later you must specify
both in order to specify either.

No comments: