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.
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.
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.
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>
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
