<A HREF="#" onClick="window.open('trivia.html', 'triviaWnd', 'width=370,height=240,status=1'); return false;">click here</A>
• onClick is the event handler. When the user clicks, it opens a window with the specifications (parameters), i.e., size of window, URL to display in window, scrollbars, etc.
• window.open is a function that controls the event (opening a new browser window) and contains the event specifications, including what html doc to load in the window (trivia.html), window name (triviaWnd), size of window (370x240), and its status bar (1 or yes).
• The first parameter, 'trivia.html' is the URL of the file to load in the new window. Note that it doesn't have to be an HTML file. It could also be an image file or anything the browser can display.
- If you want information to load in the same window, you use the same window name in your links.
- If you want multiple windows then you need to use unique names for each window created.
• The third parameter determines the dimensions and appearance of the window. We have specified a window of size 370x240 with a visible status bar. Note that it is in single quotes and the quotes end after the last parameter.
•The appearance 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)
top - Number of pixels from top of screen (eg: top=100)
left - Number of pixels from left of screen (eg: left=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)
NOTE: Instead of yes/no values, you may also give 1/0. i.e., you may write toolbar=1 instead of toolbar=yes.
1) Basic window. No menu, no toolbar, no status bar, not even scrollbars:
EX: <A HREF="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes,resizable=no'); return false;">Try</A>
NOTE: scrollbars won't show up if they aren't necessary.
3) Window with toolbar, statusbar and scrollbars. You can resize this window if you want which wasn't possible with above sample windows:
EX: <A HREF="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=yes,resizable=1'); return false;">Try</A>