Positioning With "moveTo()"

We can position our window by using the "moveTo()" method of the "window" object. This is coded after the "window.open()" method. If you coded it first, there wouldn't be a "window" object to move and you'd get an error.

Here's what the code would look like:

<script language="JavaScript">

function popUpWindow(){
myLittleChildWindow = window.open("samp062.htm", "babywindow",
"height=100,width=100,resize=0,
menubar=0,toolbar=0,location=0,
directories=0,status=0");

myLittleChildWindow.moveTo(500,300);}

</script>

See how the new window is opened and positioned here. Notice how the window opens in the screen's upper left corner, but quickly moves 500 pixels to the right and 300 pixels from the top. Close the window and try again.

The little window is positioned by its top, left corner. That corner is placed at 500 pixels to the right of the left side of the screen, and 300 pixels down from the top of the screen. Be careful to to place a window off of the screen. People can't see it and it may cause a browser error.

It may be handy to keep in mind that the lowest resolution (pixel grid) your viewers will be using is 640x480. The current median average is 800x600. It's also important to keep your pop up window's dimensions in mind when placing it. Remember it's placed by the top,left corner of its browser window.

An alternative to putting the "moveTo()" in the parent window is to put it in the child window being opened. Do that like this (in the child window's head):

<script language="JavaScript">

window.moveTo(500,300);

</script>

Notice in this version we didn't have to use the window's name, "myLittleChildWindow". We just had to use "window". This is representative of a general principle of JavaScript: You don't have to use a window's name when the function effects the window it's coded in. You only need to use a window's name when trying to do something in one window from another window.

Both methods work pretty much the same. It's often convenient to keep the "window.moveTo()" with the "window.open()" for easy editing.

Using "focus()"

So far we've been coding pop up windows that pop up in front of our parent window. If you notice closely, the pop up windows are also the "active" window by default.

The active window is the one up front and ready to use with a highlighted title bar. This window is said to have "focus" or "be focused". The other, inactive, windows are said to be "blurred". JavaScript allows us to manipulate the focusing and blurring of windows with the "window.focus()" and "window.blur()" methods.

Lets say we're going to load a pop up window with our main window -- outside of a function like most ads are loaded. We may not want the advertisement to be the focused window. We may want our content window to be up front while the advertisement loads in the background.

We can do this by using "window.focus". I'll be using the little window we've already made as an example. In the parent window's page, code:

<script language="JavaScript">

function popUpWindow(){
myLittleChildWindow = window.open("samp062.htm", "babywindow",
"height=100,width=100,resize=0,
menubar=0,toolbar=0,location=0,
directories=0,status=0");

myLittleChildWindow.moveTo(500,300);}

window.focus();

</script>

The above code would open and position the "myLittleChildWindow" and would then switch the focus back to the parent window. This would put the child window in the background. It's the "window.focus()" statement that does this.

Remember that we can use "window" instead of a window name when the JavaScript effects the same window it's coded in. This function focuses the window n which the "focus()" method is coded, namely the parent window.

Exercises

What I want you to do is code a parent and child page similar to the above example. Then I want you to make a link on the parent page that will pull the child window to the top.

This effect is coded in the parent window, but effects the child window. We'll need to use the child window's name and the "focus()" method: "myLittleChildWindow.focus()".

Now code two similar child windows off of the same parent window.