Part One
The Pop Up Window
What is a Pop Up Window?
A pop up window is a second browser window that "pop ups"(Its usualy smaller than normal windows) when called by either a link, a button or an action.
First let's write a little HTML file to "pop up" in our window. If you do not know how to do this, you shouldn't even be tackling this tutorial, go back to https://www.angelfire.com/ok2/webhelp/javahelp.html and try again to learn basic HTML . Make one with simply one line of text like this:
<![CDATA[
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function WinOpen() {
open("window.html","Window1","width=200,height=100");
}
//-->
</SCRIPT>
]]>
This little script will call up the file "window.html" when WinOpen is activated. How do we activate WinOpen? One of many ways. One way is with a link. Try this:
<![CDATA[
<A HREF="#" onclick="WinOpen()">Open Window.html file</A>
]]>
If you want to see what happens, click here and try it. Don't like the results? Don't blame you! Why the page you WERE on turns into a directory structure or the index page of that directory is simply some sort of bug. This can be overcome by designating the file from which the pop up window is opened in the A HREF tag. I called the example file popup1.html. Knowing this, you can see that the line that calls up the pop up window could look like this:
<![CDATA[
<A HREF="popup1.html" onclick="WinOpen()">Open Window.html file</A>
]]>
Try the example by clicking here. That's a little better, but still not the finest quality money can buy. What we did here is to call up the original document to fill the void created by the link. It gets the job done. Of course, you are reloading the page from the top, so if the link that opens the pop up is farther down the page, you can use a NAME in the anchor and have the page reload and go to that NAMEd part of the document...
<![CDATA[
<A NAME="popup">
<A HREF="popup1.html#popup" onclick="WinOpen()">Open Window.html file</A>
</A>
]]>
It seems the most consistant way to call up a pop up window, is to use a button. The button is the same type used in HTML FORMs. Using the same JAVASCRIPT we defined above, we can change popup1.html to look like this:
<![CDATA[
<FORM>
<INPUT TYPE="button" name="Window" value="Open Window.html file" onclick="WinOpen()">
</FORM>
]]>
As you can see, even in raw HTML the way you would use a button to open the pop up is not too different then using an anchor tag. To try it click here. As you can see, the page did not need to reload or anything when the button was clicked. The trick will be in fitting the button in with your text.
Let's go ahead and modify our "Window.html" file to include a button as well. This button will be used to close the pop up window. Below is the "Window.html" file with the additions required to "self close". I'll save the new version as "Window2.html".
<![CDATA[
<HTML><BODY><CENTER>
<FONT FACE="Arial" SIZE="4">This is a pop up window!</FONT>
<!-- The below is what you would add for the "self close" button -->
<FORM>
<INPUT TYPE="button" value="Close Window2.html file" onclick="self.close()">
</FORM>
</CENTER></body></HTML>
]]>
Now I'm going to take the example that uses the button to open the pop up, to open our new pop up file, "Window2.html". This example will show how the self close works.
Pretty cool, huh? Now if the button didn't quite fit in the pop up window, you can, of course, change the width of the pop up window in the initial JAVASCRIPT that we wrote. There are other things that can be defined that can modify the pop up window. I'll bring up the HTML for the example that uses the button to show you all of the different variables for a pop up window:
<![CDATA[
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function WinOpen() {
open("window.html","Window1","width=250,height=100,resize,toolbar,scrollbars,status,menubar,location,directories");
}
//-->
</SCRIPT>
<HTML><BODY>
<FORM>
<INPUT TYPE="button" name="Window" value="Open Window2.html file" onclick="WinOpen()">
</FORM>
</body></HTML>
]]>
You can see that not only did I make the width 250 to accomodate our self close button, but also allowed the display of the scrollbars, status window, menubar, location window, and the directories. All of this makes for a fairly ugly pop up window, but I'm sure you can figure out which ones YOU will actually need to use for your intents and purposes.
Another way pop up boxes have been used that I am CERTAIN you have seen, are those windows that pop up when the page loads. This is done with this:
<![CDATA[
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function WinOpen() {
open("window.html","Window1","width=200,height=100");
}
//-->
</SCRIPT>
<HTML><BODY onLoad="WinOpen()">
<BR><BR><BR>
I'm just some spontaneously typed of text for you to get a sense of perception on this whole JavaScript thing.
<BR><BR><BR>
</body></HTML>
]]>
So, for this example, we'll use the same pop up window as the last example, only it will pop up automatically when the example is loaded. In other words, when you click on this link to see this example, the pop up window will open up. Why? We define WinOpen() as a function that opens window.html in a Window named Window1 with a width of 200 and a height of 100. In the BODY tag, we call that function to execute when the page is loaded, or on load, onLoad! See?
The BODY tag is the same BODY tag you would use any way. This is not a special BODY tag or anything like that. So, if you want a web page with a white background and black text, you would just add the "onLoad" to that tag. For example:
<![CDATA[
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" onLoad="WinOpen()">
]]>
Prior to this example, the "event handler" we've used has been "onclick". Now we'll try another event handler: "onload". "onLoad" is actually used widely in javascript to call scripts into play when the page loads. You'll never guess what the opposite of onLoad is! It's onUnload! So, if you change that BODY onLoad="WinOpen()" to BODY onUnload="WinOpen()" as I did in this example, you'll see that the window pops up when you back out of this page!
