Here is a useful tutorial to explain the "in's and out's" of using and utilizing JavaScript spawned "Pop-Up Windows". Their exact identity and how to create them will be made very clear in all of twenty minutes. Here's what you'll find in this tutorial...

Pop-Up Windows vs. New Browsers...is there a difference?

How to use Pop-Up Windows

Syntax & Definitions

Some examples

Example 1

Example 2

Example 3

Tips & Tricks

Tips & Tricks #1

Tips & Tricks #2

Tips & Tricks #3 (most important)

In closing...

In all actuallity, No. The one thing you may notice is that they often appear different. Some do not have Menu Bars, others are without Location Bars. Either way, they are still new occurences of the Browser.

Right here and now I want to curve some possible areas of confusion. Now that we've determined that there is no difference (aside from a few attributes) between a "Pop-Up Window" and the "Browser Window", let me introduce this convention; When I refer to a "Pop-Up Window" I am talking about the ones that are similar to the ones that Geocities and other Ad Campaigns employ. And when I say "Browser Window" this refers to when you click on the "File / New" Button in your Menu Bar. Other than aesthetics, the two are exactly the same.

Now you should be asking yourself and me, "What 'aesthetic' differences are there?" or "What are 'aesthetic' differences?"

Basically, the "aesthetics" of something is it's appearance. How it looks, but nothing to do with what it does. The most common differences with these "Pop-Up Windows" are their Size, Menu Bars, Location Bars, Scrolling ability, and if it's Resizable or not. When you define a "Pop-Up Window" you can set all of these settings, and a few more.

Which brings us to...

Now that you know 'what' a "Pop-Up Window" is, you may be asking yourself, "Why" is it? What purpose does it really serve other than allowing people to make stupid advertisments and torment me and make my computer slower? Well, a lot of things, but there's time to get into that later.

If you hadn't noticed, this whole "Pop-Up Window" phenominon didn't appear until about 1995/1996, about the time of Netscape 3.0 came out, and when Java & JavaScript's capabilities were first hitting the internet with a profound impact. Do you think these occurances are all coincidences? Nope, they're not.

Reason: "Pop-Up Windows" are generated by using JavaScript code within your HTML document to generate a new Web Browser and Define it's attributes.

Here's the base code of how one looks:

<script language=JavaScript>
open("URL", "windowName", ["windowFeatures"])
</script>

• <script language=JavaScript> = Tells the browser you're using that you are now going to be changing from HTML (the standard coding for language on the Internet) to JavaScript.
• open = Tells the browser you wish to open a new Browser Window (the "Pop-Up Window")
• "URL" = This is the URL the new Browser will automatically load when it opens. It's similar to the "Home" feature in Netscape. But this URL can be anything you want.
• "windowName" = Well, that's the Name you're giving to the Window so that you can Target the Window from within <A HREF> Tags and Forms. (useful if you wish to communicate between two windows!)
• ["windowFeatures"] = The brackets ( [ ] ) mean that these attributes are optional. But, with them, you can custom-taylor your new Browser Window to fit your purposes. Here's the options for "windowFeatures":
toolbar[=yes / no] or [=1 / 0]
location[=yes / no] or [=1 / 0]
directories[=yes / no] or [=1 / 0]
status[=yes / no] or [=1 / 0]
menubar[=yes / no] or [=1 / 0]
scrollbars[=yes / no] or [=1 / 0]
resizable[=yes / no] or [=1 / 0]
width=## (## is the number of pixels)
height=## (## is the number of pixels)

• </script> = Now you're telling the Browser you're all done with the JavaScript Code and you wish to revert to HTML (or whatever code you were using Directly before you started the JavaScript).

1. What are the [=yes / no] or [1 / 0] things?
2. What if I don't put any values in the "windowFeatures" section?
3. How do I add those windowFeatures if I wish to have more than one referenced?

2. If you fail to put any attributes in the "windowFeatures" portion of the code, then it is automatically set to "True" (true = 1 or yes). Therefore, writing every attribute with a 1 or yes is the same as leaving the entire field blank. (excluding width & height) Leaving the height or width attribute out of the code will open up a new window as large as it can.

3. The best way to answer this question is to give you a full example of code. That's what I'm going to do now.

Clicking on Example1 will reveal a New Browser Window (Pop-Up Window) that has a toolbar, No location bar, a directory bar, No status bar, a menubar, scrollbars if necessary, that is resizable, with a width and height of 150 pixels each. The starting page to be displayed is https://www.angelfire.com/ct/ctsdomain/popupEx1.html the Name of the new Window is Example1.

Here's the code:
open('https://www.angelfire.com/ct/ctsdomain/popupEx1.html', 'Example1', 'toolbar=1,location=0,directories=1,status=0,menubar=1,scrollbars=1,resizable=1,width=675,height=150')

Notice that that "windowFeatures" section has to be brought to a new line because it is so long? That is because you name an attribute, put the equals sign, assign the value, then a comma, and leave NO SPACE before the next attribute. Do this every time and you will have fewer and fewer mistakes!

Example 2

Example 2 is conciderably more 'tricky' than Example 1. Example 2 requires you write a JavaScript function and call it from the link. Yeah, it seems kind'a lengthy; especially given how easily you can create one from the button. Aside from the differences in code, you have to think about the differences in page formatting and appearance. It's all about what looks best for you.




or

    Example 3

Ok, before clicking on Example 3, read what it does first. Example 3 will load up one "Pop-Up Window" and then another from that one, for a total of 2. What this is going to show you is the common Ad Campaign-style "Pop-Up Window". These were probably the first ones you've seen. How it works is that when the first window successfully loads, a piece of code almost exactly the same as Example 2 is executed, thus, a new window is opened. These windows usually are NOT Resizable, Without Scrollbars, and have Precise height & width measurements that are usually the exact size of the image they display. You do not need to put a pic in these new documents, but for ads, that's just the norm.

Well, In here, I am going to add a few tips, tricks and some words of advice to end this brief look into the strange, yet fascinating world of "Pop-Up Windows".

Number One:  Try to know exactly what you're trying to accomplish. Yeah, it sounds silly, but think about it for a moment. Wouldn't it would be horrible for you to take on the task of learning JavaScript if what you can are trying to accomplish can be done with simple HTML. One note is opening up a plain, new browser. This can be easily done (many times more easily than JavaScript) with a simple "target" tag. If you are unfamiliar with targets and frames, then a great place to learn about them is Jonny's Frames Tutorial. This tutorial will explain to you how to create Frames easily and efficiently and also how to navigate through them without creating a jumbled mess (something that's easy to do in Frames navigation if you're not careful). You may not have noticed, but you can use that link to Jonny's page as an example of what I'm talking about for a new window. and a "target" The link code is this:

<a href="http://www.webhelp.org/frames.html" target="_new">Jonny's Frames Tutorial</a>

Notice the target="_new" portion of the tag. It will open up a NEW (go figure) window exactly the same as the one you get when you open up the Netscape or Internet Explorer application. Pretty snazzy, eh? It's a great short-cut instead of using the, usually lengthy, JavaScript code. Just a side note: You can also use target="new" without the underscore to achieve the same effect.

Number Two:  Adding buttons to close windows are pretty convenient once you've opened them up. A lot of users will appreciate this as well. Not only is it more convenient, but it also gives the user the reassurance that it's alright to close the window. The last thing you want to do is load up the Task Bar with useless browsers and slow down a computer. If you've got a really slow page, noone will want to visit, no matter how cool it may be.

Here's the exact code to create that button that closed the small Invitation window you got when you first visited:

<form name="closer">
<input type=button value="Close This Window" onClick="self.close()">
</form>

And that's it. Three realatively small lines of code. To create buttons, they MUST reside within <form> & </form> tags. No exceptions. That's why the first and last lines are necessary. While the middle line actually creates the button. That's what the type attribute means. An input object can be many things within a form, so you have to declare a type. And the value attribute is what text appears on the button itself.

That brings us to this line: onClick="self.close()". That piece does the actual Closing of the window. onClick is an event handler. It is interperated as: When this object (the button) is clicked on, do this: [equal sign, open quotation mark] self.close() [close quotaion marks]. self.close(): "self" refers to the window the code is in. Like when you say myself, it means you. and the .close() means just that, close. So, it's sort of like reading backwards, but not exactly. Once you get used to an Object Orentated Language, like JavaScript, it'll make a lot more sense.

So, you can put those three simple lines of code in any HTML document and that'll create a button that'll close that window. Pretty cool if you ask me.

Number Three:  This is by far the most important thing you can learn about "Pop-Up Windows":
"Don't over-do it!!!" Yup, that's it. Somewhat anti-climatic, huh? But seriously, If you recall from the Invitation Window that greeted you when you first entered, the one thing that you agreed with was that almost everyone hates a Pop-Up Window Frenzy! Don't drive off users by bombarding them with these things. People just don't like it!

There are also ways of making an almost infinate amount of windows load up. It's even more annoying than having just two windows pop-up! (do the math) The code is all of about 5 lines. There are real easy ways around these annoying scripts. I should know, I've tested them all and posted them on my site for other JavaScript developers to look at and counter them. If you're looking to mess up someone's computer, this is not the way to do it. All you will succeed in doing is possibly making a user shut down all their browsers or turn the JavaScript off (didn't think about that, did ya?) A simple 'Clear Cache', and all is back to normal.

Just remember how ticked off you get when you have to close a whole lot of windows you didn't want open. Maintaining web-etiquette helps everyone out. It smooths the sometimes bumby roads of HTML and minimizes wasted time; the ultimate bane of all who surf the net!

In closing, I'd just like to add a few words. If you're looking for a solid site for HTML, Frames, and Tables help; you should definately check out Jonny's HTML Headquarters. It's the best tutorial I've found for both beginners and for those who just sometimes forget tags. (I'm guilty) There you'll find a really nice WWWBoard to post questions if you do not find them in the tutorials. I'm a regular there, always extending my hand to those who seek the frightening knowledge of HTML and JavaScript. But be assured that there are others far more capable there when I get stumped.

Feel free to visit my homepage: CrazyTed's Domain if you've got the time. I concider it a very good example of HTML scripting along with some minor JavaScript enhancements scattered throughout the site.

Also, if you have any questions that stem into the realm of JavaScript, feel free to E-Mail me. If I can't help you out directly, then I'll definately be able to direct you to someone who can.

Last updated on 3/2/99