|
If you have ever been near any of the homepages in Geocities
or Tripod, you must be familiar with
the small window that pops up with an advertisement banner. Undoubtedly,
you considered it irritating and in bad taste. I agree they can
be anoying but they have there uses.
Pop-up windows are usually used when you want to display something to
the users but you don't want them to leave the page that they are currently
viewing (Perhaps you are afraid that they might not return).
Click here
to see an example of a Javascript activated window.
Let us now look at the code used to create that link.
Note that I am using single quote for nested strings. The 'return
false' part tells the browser that when the user clicks on the link,
the browser should stay on the same page rather than load the page specified
by HREF. The onClick() handler calls the window.open()
function to open a new browser window. The first parameter, 'http://www.bitslv.com/index.php'
is the URL of the file to load in the new window. So our window displays
index.htm when it opens. (Note that it doesn't
have to be an HTML file. It could also be an image file or anything the
browser can display.) The second parameter, 'indexWnd' is the
name we wish to give to the new window. Details about this later. The third
parameter determines the dimensions and appearance of the window. We have
specified a window of size 370x240 and a status bar. Note that it is a comma-seperated
list. The apperance of the window can be controlled by changing the value
of the third parameter. The commonly used options are:
- height
- Height of the new window in pixels
(eg: height=100)
- width
- Width of the new window in pixels
(eg: width=200)
- directories
- Specifies whether to display the browser directory buttons like "What's
Cool" etc.
(eg: directories=yes)
- hotkeys
- Enables or disables various hotkeys
(eg: hotkeys=no)
- location
- Specifies whether the "Location" box is to be displayed
(eg: location=yes)
- menubar
- Specifies whether the new window should have a menu bar
(eg: menubar=yes)
- resizable
- Specifies whether the user is allowed to resize the new window
(eg: resizable=no)
- scrollbars
- Specifies whether the new window can have scroll bars if necessary
(eg: scrollbars=yes)
- toolbar
- Specifies whether the new window has a toolbar
(eg: toolbar=yes)
Instead of yes/no values, you may also give 1/0. i.e., you may write
toolbar=1 instead of toolbar=yes.
Here are some combinations that you can try for yourself. All of them
open this document in a new window with different functionalities.
Try
this
A basic window. No menu, no toolbar, no status bar, not even scroll bars.
Try
this
A window with menubar, location box and scroll bars.
Try
this
A window with toolbar, statusbar and scroll bars. You can resize this window
if you want which wasn't possible with the other windows.
In the above code samples, I have split the code to multiple lines for
easier reading but when you use them, make sure that everything between
the double quotes is on a single line.
|