I can always tell when there is a new command that is in vogue. I start getting all kinds of email asking how to do it. Well, this is the new thing. I don’t know why, but everyone wants to know how to create these little windows that pop up. Some sites even use them as control panels operating the main window.
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.
The Basic JavaScript Format
Oh yes! This is done through JavaScript. But it’s a very simple JavaScript, so don’t get worried so soon. Here’s the basic format.
Heck, you can almost guess what each of the parts does. Since this is a script, you need the opening SCRIPT LANGUAGE=”javascript” statement, and of course the /SCRIPT statement at the end. The are used to hide the text from older browsers that don’t read JavaScript. You see, if you didn’t have those in there, the text would display. This way it doesn’t.
…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 Window
Now we get to the commands I used on this page to get the little window effect. This is exactly what I have:
(Get all on one line…no spaces)
Here’s What’s Happening
- 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.
Page Inside A Page
The example I gave above relies on two pages. The first is the main HTML Document that carries the JavaScript. The second is the HTML Document that is displayed inside the new window.
Here I’ll get a little more fancy with the JavaScript code. I’ll show you how to set it up so that the new window is included inside the main HTML Document completely. One page – two windows.
What we have above a very basic script written by Andree Growney and myself. This JavaScript creates a “function” that opens a new window. Look up at the top line of the script after the SCRIPT LANGUAGE=”javascript” line.
The function starts with the line: function openindex(). What that does in JavaScript speak is create a function called openindex. Then whatever is inside the { and the } following that statement is what the function is supposed to do. With me so far? In the case of this function, a new window will be opened up. The next lines of the script are quite similar to what we’ve seen so far:
OpenWindow=window.open(“”, “newwin”, “height=250,
width=250,toolbar=no,scrollbars=”+scroll+”,menubar=no”);
The line calls for the creation of a new window. But, as you can see, there is no external page called for. There are just the quote marks. This forces the JavaScript to look at itself for the information.
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:
OpenWindow.document.write()
…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
No, you’re not done yet. Now that you have created and altered this JavaScript to your heart’s content, it still will not work as is. You see, when you create a function such as this, something must be used to “trigger” the function to work. Usually, as is the case here, you use a command in the BODY portion of the main HTML document. So here’s the deal…
- Configure the above script and place it in the 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 Window
This 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 Window
I’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:
Place that pup on the page that will go into the new window or place it in the code in the JavaScript format above and you get a little button that closes the window when clicked.
The Window Closes Itself
OK – now we’re getting into bigger and better JavaScripts. This little performance is too much to get into here, so I will send you to the small tutorial I recently wrote.
The page is called Hello Goodbye. It’s a great script written by William Flanery. Once you go, you’ll see the effect, then have ability to grab the full working script.
Other Fun With New Windows
What 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.
Enjoy!
