|
|
|
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. But believe me when I say that it is much more fun when you do the popping up yourself. Not convinced...? Click here now! I am not giving the source code for that because you're better off not doing that to your visitors ;-)
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). How about a
Trivia Game as our next sample. I recently came across this game and found
it very entertaining. You are asked ten questions rapid-fire style, the
faster you answer, the more points you get. If you get more than 1500
points, you qualify for the $25 weekly drawing by registering. So, if you
are ready to play, click here.
Let us now look at the code used to create that link. '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, 'trivia.html' is the URL of the file to load in
the new window. So our window displays trivia.html
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,
'triviaWnd' 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:
Instead of yes/no values, you may also give 1/0. i.e., you may write Here are some combinations that you can try for yourself. All of them open this document in a new window with different functionalities. A basic window. No menu, no toolbar, no status bar, not even scroll bars.
A window with menubar, location box and scroll bars.
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.
|
|
|
|
