Manipulating Windows

Reading: Thau Chapter 5 until page 84.

Opening Windows

Sometimes, you'd like to open a new window for content. For example, you might open a movie in its own browser window. Below is a button that, when clicked, displays a movie in its own browser window. Try it out!

How is this done? Like this:

<FORM>
    <INPUT type="button"
         value = "Click to see movie"
         onClick='window.open("meteor.html", "movie", "width=350,height=350")'>
</FORM>

Notice that we've used the FORM tag to create a form. In general, a form can contain a number of elements including buttons, checkboxes, and textareas, among others. The INPUT tag is used to add an element to the form. In our case we have a very simple form with only a single input - a button. When you create a button you can specify the text displayed on the button by the value attribute as we have done here.

When the user clicks on the button an event occurs. In general, an event is something triggered by the user's actions. In this case, the action is the clicking on the button by the user. A browser will detect the event and then run an event handler, code that responds to the specific event. The event handler has a special name, related to the event it is intended to handle. For example, some common event handlers are OnClick, OnMouseOut, and OnMouseOver. Because the event that we are interested in is the click of a button, the event handler that will execute is the OnClick event handler. But, what exactly does OnClick do when it executes? That is for us to decide - we write the code to be executed! We are responsible for customizing the contents of OnClick so that we get precisely the behavior we want - specifically, the opening up of a window that displays a movie.

To do this we need to learn the open() method. The open() method takes from 1 to 3 string arguments:

• The first argument is the URL that should be loaded into the new window. Notice, the URL for our example is meteor.html. Meteor.html is an HTML file that contains the EMBED tag that displays the .mov file. Click on the button to open up the window and then view the source file to see this.
• The second argument, if it's supplied, is a name or label for the window. Technically, this is called the "target." In our example, we named the window "movie".
• The third argument, if it's supplied, contains configuration information for the new window such as size and features. Here we have defined the width and height of the window.

Now that we know how to open up a window that displays a movie, this code is placed inside quotes to define the OnClick event handler (as is done above). Note that because the arguments of the open() method are strings (and require quotes) this results in a "nesting" of two sets of quotes. When this occurs, use single quotes for one set of quotes and double quotes for the other. The order does not matter.

More on Opening A Window

You already learned about how to open a window to show a movie. Let's learn some more about this. Please click on the following button:

If all goes well, that button will resize the current window, move it to the upper left, and open up a new window to the right of this one. Today, we'll learn how to do all that and more.

Why would you want to do something like this? Sometimes, you want to make some information available that is something of a "detour" or something where you want the main page still available. By opening a second window, users can close the other window when they no longer want it, while keeping their place in the main window. (This is really no harder than using the "back" button, and yet web sites seem to use and like it.) Another common use is when a site provides "thumbnail" pictures, where clicking on the thumbnail brings up a larger version in a new window. There are, also, some LTC (def.) uses of windows.

Let's look at the code that configures the windows for this page:

<form>
    <input
       type="button"
       value="configure windows"
       onClick="
           adwin = window.open('ad.html','ad_win','width=200,height=300');
           adwin.moveTo(750,0);
           window.resizeTo(900,600);
           window.moveTo(0,0);
       ">
</form>              

Each of the four lines contains the same pattern:

x.y(a,b)

• The thing before the dot, the "x" in our pattern, is an object (or a variable that contains one). Recall the Date object that we looked at. In this case, all of our objects are windows, which means that they are the programmatic representation of that stuff we see on the screen. They capture the size, location, and other properties of the window. The "window" variable contains the current window (rather like the magic "this" variable.)
• The thing after the dot, the "y" in our pattern, is a method. Recall that the Date object had methods like "getMonth()" and "getFullYear()". [It's traditional to put empty parentheses after method names, to remind the reader that they are methods.] These are methods that retrieve information from the object. Other methods can modify the object, such as "moveTo()" or "resizeTo()" Each kind of object supports a different set of methods. It wouldn't make sense to use "getMonth()" on a window, and it wouldn't make sense to use "resizeTo()" on a date.
• The things in the parentheses, the "a" and "b" in our pattern, are the arguments to the method. Some methods don't need any arguments, and so the parentheses are emtpy, but they must be there. The "getMonth()" method is an example. The "moveTo()" and "resizeTo()" methods need arguments that say where to move the window to and what size to make it. We'll talk more about these methods later.

The open() Method

Your JavaScript code can open a new window by using the open() method. The open() method takes from 1 to 3 arguments.

• The first argument is the URL that should be loaded into the new window.
• The second argument, if it's supplied, is a name or label for the window. Technically, this is called the "target." In the example above, we named the window "ad_win". Notice that it is a string.
• The third argument, if it's supplied, is a string containing configuration information for the new window: size and features.

Finally, the open() method returns an object that represents the new window. Typically, we store this object in a variable so that we can manipulate the window later.

You will see examples where the name of the JavaScript variable is the same as the target. For example, in Thau on the top of page 77, you see the following example (actually, there's a typo in Thau's example, which I've fixed here).

var window_name = window.open("http://www.nytimes.com/","window_name");

The fact that the variable has the same name as the target is a mere coincidence, or possibly a way to save human memory. On the same page of Thau, there is the following example, which shows that they can be different.

var salon_window = window.open("http://www.salon.com/","salon", "resizable");

The Target

Suppose that we want to have three web portals readily available in another window, say google.com, aol.com and yahoo.com. The following three buttons will open a new window for them.

Try them each. You'll notice that they all open in the same window, rather than a separate window for each. This is because they share the same target. The code is as follows:

<form>
    <input
        type="button"
        value="Google"
        onClick="var gwin = window.open('http://www.google.com',
                                        'portal','width=300,height=300');
                gwin.moveTo(750,400);
       ">
    <input
       type="button"
       value="Yahoo!"
       onClick="var ywin = window.open('http://www.yahoo.com',
                                       'portal','width=300,height=300');
                ywin.moveTo(750,400);
       ">
    <input
        type="button"
        value="AOL"
        onClick="var awin = window.open('http://www.aol.com',
                                        'portal','width=300,height=300');
                 awin.moveTo(750,400);
       ">
</form>

If we had omitted the target, or supplied different target names, there would have been three windows opened, not just one. Of course, they would all be the same size and at the same location.

Sometimes, using different targets is the right thing to do, since if you are, say, opening up thumbnails that the user may want to have open simultaneously (so that the two pictures can be compared), using a different target would be the way to go. Try the following:

A "target" is also an allowable attribute of the A (anchor) tag, so you can set up a hyperlink that opens in a new window

The Features Parameter

The features string can initialize certain properties of the window. Here are some possibilities:

Different browsers may have different defaults, so if you care about whether, for example, the window has a location bar, it's best to specify it.

Manipulating the Window

Once a window is open, you can manipulate it by using various methods. Here are some:

• focus() Move the window to the front, and make it the focus of any mouse or keyboard input.
• blur() The opposite of focus(): Move the window to the back, and don't make it the focus of any mouse or keyboard input.
• moveTo(x,y) Move the window so that it's upper left corner is at the given pixel coordinates. As with imagemaps, the y coordinate starts at zero at the top edge and increases going down.
• moveBy(dx,dy) Move the window's upper left corner by the given number of pixels, relative to its current location. (The "dx" is short for "delta x," suggesting that this is a change rather than an absolute amount.)
• resizeTo(width,height) Resize the window to have the given width and height, in pixels.
• resizeBy(dw,dh) Resize the window to change its width and height by the given number of pixels.
• close() close a window.

You can use the following buttons to manipulate the ad window.

<form action="">
<input type="button" value="move it up"      onClick="adwin.moveBy(0,-10);">
<input type="button" value="move it down"    onClick="adwin.moveBy(0,10);">
<input type="button" value="make it taller"  onClick="adwin.resizeBy(0,10);">
<input type="button" value="make it shorter" onClick="adwin.resizeBy(0,-10);">
<input type="button" value="close it"        onClick="adwin.close();">
</form>

All of the buttons refer to a variable, adwin, that got its value from the "configure windows" button at the top of this page . You'll notice that we now can understand all of the code in that long event handler. However, you may be wondering why there is no "var" in front of the assignment statement that gives the "adwin" variable its value. That's because the variable had already been created by a "var" statement in an earlier SCRIPT tag. It looks like this:

<script language="javascript">
var adwin;
</script>

The code couldn't be simpler, but it is necessary. Notice that it wasn't necessary to give the variable a value, only to create it. Had we failed to create it using the SCRIPT tags, it would have existed only within the event handler, and these later event handlers to manipulate the window would not have worked correctly.

Image Thumbnails

An image "thumbnail" is a smaller (about the size of a, er, thumbnail) version of a picture. It's a sort of a "preview," where you can decide whether you want to see the full-size version.

Can you guess what the code would look like to do these image thumbnails, where the larger image opens in another window?

Look, Ma, no URL!

One odd thing to do is to omit the URL and, instead, write the contents of the web page on the fly, using document.write().

Here is the code for it:

<form action="">
<input type="button"
       value="dynamic halloween window"
       onClick="
        var page = '<HTML><BODY BGCOLOR=ORANGE><H1>Boo!</H1></BODY></HTML>';
        hallo_window=window.open('','hallo_window','height=200,width=200');
        hallo_window.document.write(page);
        ">
</form>

One advantage of this sort of window is that there are fewer html pages to manage, since there is no other page. This might be convenient for examples like the definition of LTC , at the top of the page. Finally, of course, the main purpose of this example was the pun on "hallow window."

Popup Windows

A few years ago, "popup" ads were all the rage among web advertisers. Some advertisers were "in your face," and used the "focus()" method to put the window on top. Others were more subtle and used the "blur()" method to put the window behind, so you wouldn't see it until you closed your browser window. All this drove users crazy. Since then, many browsers have changed so that popup windows are blocked by default.

If you want to see one, you'll need to enable pop-up windows in your browser and then reload this page. In Safari this can be done by selecting Safari in the menu bar and then selecting Block Pop-Up Windows.

The code is pretty straightforward: put the window.open code in SCRIPT tags. As you know, the code within SCRIPT tags gets executed automatically when the page is loaded:

<SCRIPT LANGUAGE="JAVASCRIPT">
    var ad_win = window.open("ad.html", "ad", "width=500,height=120");
</SCRIPT>

Summary

• Windows are opened with the window.open() method, that takes a URL, an optional "target" and an optional feature string. The open() method returns an object corresponding to the window.
• The returned object can be used to manipulate the window, such as focussing, blurring, moving, resizing, and so forth.
• If two calls to open() use the same target, only one window will be created.
• A popular use of new windows is for image thumbnails
• document.write can be used to write content into a new window.

• Introduction
• Syllabus
• Assignments
• Documentation
• Project

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 25-Jan-2007 16:15:19 EST