Dueling Windows

By Stephen Bucaro

It is extremely easy to create and control browser windows using Java Script. In a previous article, I showed how to use Java Script to define the features of a window, and several different ways to open and close a window. In this article, I will show you how to use Java Script to move a window, resize a window, bring a window to the front, and bring a window to the back. This is all very easy to do using the following Java Script methods.

moveTo(x,y)
resizeTo(x,y)
focus()
blur()

Click on the button below to create the example window, which we will call the "opener". The opener window contains a link that you can use to open a another window. When the opener window creates the second window, it assigned it to a variable named "child" (any valid Java Script variable name could have been used).

We can use that variable name to control the child window from the opener window. For example, we can use the link shown below to move the child window to a specific location on the screen.

<a href="#" onClick="child.moveTo(0,200);">Move Child Window</a>

The x,y values in the moveTo(x,y) method is the pixel location of the upper-left corner of the window. Alternatively, we could have used the moveBy(x,y) method to move the window a specific number of pixels from its current location.

Note: The "#" in the link above causes the web page in the window to scroll to its top. If you don't want the page to scroll, you could use a button instead of a link, as shown below.

<input type="button" value="Move Child Window" onClick="child.moveTo(0,200);">

Note: Avoid moving a window entirely off the user's screen. You can use the following code to determine the size of the user's screen.

<script language="JavaScript">
var width = window.screen.availWidth;
var height = window.screen.availHeight;
document.write(width + " x " + height);
</script>

We can use the link shown below to resize the child window. Alternatively, we could have used the resizeBy(x,y) method to resize the window by a specific number of pixels.

<a href="#" onClick="child.resizeTo(300,300);">Resize Child Window</a>

We can use the link shown below to move the child window to the back, causing it to loose the focus. Similarly we could use the blur() method to move the child window to the top and give it the focus.

<a href="#" onClick="child.blur();">Move Child to Back</a>

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse

RSS Feed