Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Window Object Properties and Methods

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.


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);

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>

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268