So You Want To Open A Window, Huh?
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
If you decide to go with this kind of pop up window, use it sparingly. I think they become an annoyance after a while. Sort of like some guy telling you the same joke every time he meets you. It's fun about three times. Then you start yelling at the screen. I do at least. It really scares the cat.
But if you insist on doing one, let's do it right! We'll start at the beginning.
...but it's the stuff in the middle that that makes the magic.
window.open ('page.html') does just what it says. It opens a window (a new browser screen actually) and fills it with the page within the parentheses and single quotes. In the example above the HTML document that fills the window is called page.html.
Is that it?
Technically yes. That little script will work and open a new browser window and you'll get the effect. But wouldn't it be great if we actually had the ability to configure the window any way we wanted? You bet. Here's how.
Configuring The WindowNow we get to the commands I used on this page to get the little window effect. This is exactly what I have:
window.open ('titlepage.html', 'newwindow', config='height=100,
width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=no, directories=no, status=no')
Here's What's Happening
- window.open is the JS command to open a new browser window.
- 'titlepage.html' is the name of the page that will fill the window.
- config= denotes that what follows configures the window. (This command really isn't required, but it's a good idea to use just to keep things straight)
- height=100 denotes the height of the window in pixels.
- width=400 denotes the width of the window in pixels.
- toolbar=no denotes if there will be a toolbar on the newly opened window. Set this to yes if you want one - no if you don't.
The toolbar is the line of buttons at the top of the browser window that contains the BACK, FORWARD, STOP, RELOAD, etc.
- menubar=no denotes if there will be a menubar. Set this to yes if you want one - no if you don't.
The menubar is the line of items above labeled FILE, EDIT, VIEW, GO, etc.
- scrollbars=no denotes if there will be scrollbars or not. Ditto with the yes and no deal. I wouldn't make a new window that would need scrollbars anyway. I think it kills the effect.
- resizable=no denotes if the user can change the size of the window by dragging or not.
- location=no denotes if there will be a location bar on the newly opened window. Use yes and no again.
The location bar is the space at the top of the browser window where the page URL is displayed.
- directories=no denotes if there will be a directories bar on the new window. Use yes and no.
This is the bar at the top of the browser window that has the bookmarks and such.
- status=no denotes if there will be a status bar. Use yes and no.
The status bar is the area at the very bottom of the browser screen that tells you "Document Done".
- </SCRIPT> ends the whole deal.
Can I Lose the Title Bar?The answer use to be no, but there is now a script that will allow it in IE 5.0 and above browsers. I have a tutoral on it here.
Where Do I Place The Code?Anywhere on the page. Towards the top will ensure it runs sooner in the process than if you put it at the end. It's a pretty robust script that doesn't need a special placement.
The name of the new window is "newwin", and the statements following define what the window will look like.
Now we get to the meat of this little ditty. Each of the lines that start with:
...denote a new line of text that will be written onto the window that is being opened. Now look down the code, note the text inside the quotes of each new line is HTML code. Thus the text written to this window is going to read as HTML code. Now, I only have a few lines here, but you can add as many as you'd like. Just be sure to continue to preface each line with the OpenWindow.document.write command. Follow the format closely. One missing quote or parenthesis can kill the entire script.
Be sure to end the script that same way I have above with the: OpenWindow.document.close()
Calling For The Function
- Configure the above script and place it in the <HEAD> section of your main HTML Document.
- To trigger the function, place this: onLoad="openindex()" in the BODY command of the main HTML document. That tells the browser to initiate the function "openindex" when the page is loaded.
Closing The WindowThis seems like the next logical step in the process. You made it open. Now let's make it close. There are three way of doing it:
- Every window carries what I call the "goodbye box" on the upper right hand corner. It's the gray square that has a little "X" on it. Click that and away it goes.
- You could offer a button on the page that closes it when the user clicks the button.
- And you could set it up so that the window closes itself.
The Code To Close The WindowI'm starting here because I don't think I need to go over the little "goodbye box". So...here's the code for the button:
<INPUT TYPE='BUTTON' VALUE='Close Window' onClick='window.close()'>
Other Fun With New WindowsWhat you can do with these little windows is really only limited to what you can think up. Here are a few other uses that you can take from my site.
- Open a new window through an onMouseOver.
- Open a window the same size as the screen size.
- Display an image in a new window.
- So You Want A Remote Control, Huh? by Andree Growney and me opens a small window that then allows you to control the big window from the small one.
And That Does It...Exciting, huh? Now you can make little windows pop up all over town. Again I offer my suggestion that one new window might be a welcome help to the users of your pages. However a new window every other page would bring you to level of telemarketers in some people's minds. Use this only when they are really needed.