In this article, I 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Dueling Windows

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>

RSS Feed RSS Feed



Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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