Controlling Browser Properties with JavaScript - Moving Windows (Page 3 of 8 )
You might not know this, but the alert() function you call every time you want a pop-up on your page is actually a method of the Window object. Take a look:
<script language="JavaScript">
// pop up alert
window.alert("I can see you");
</script>
There's also a window.confirm() method, which displays a confirmation box with a message and two buttons. Depending on the button you pick, the method returns true or false. Take a look at the next example, which demonstrates:
<script language="JavaScript">
// ask a question
var answer = window.confirm("Parlez-vous Francais?");
// process the response
if (answer)
{ window.alert
("Tres bon, comment allez-vous?");
}
else {
window.alert ("Illiterate pig!"); }
</script>
Finally, the window.prompt() method pops up an input box and stores the user's input in a variable. The following example illustrates:
<script language="JavaScript">
// ask for user input
var name = window.prompt("Enter your screen name");
// print it back
window.alert ("Welcome, " + name);
</script>
You can move a window to the front of the window stack by calling the window.focus() method (remember to use the window name when calling this method, or you won't see anything special happen), and the window.blur() method to move a window to the back of the stack. Consider the following example, which creates a child window and then allows you to move it to the front and back of the window stack using these methods:
<html>
<head>
</head>
<script language="JavaScript">
var newWin = window.open("windows.html", "newWin");
</script>
<body>
<a href="javascript:newWin.blur();">Move child window back</a>
<br>
<a href="javascript:newWin.focus();">Move child window front</a>
</body>
</html>
You can resize a window by calling the window's resizeTo() method, as in the example below:
<html>
<head>
</head>
<body>
<a href="javascript:var test = window.open('', 'test');">
<b>Open test window</b></a>
<p>
<b>Resize test window</b> to:
<ul>
<li>
<a href="javascript: test.resizeTo(300, 300);">
300 x 300</a>
<li>
<a href="javascript: test.resizeTo(640, 480);">
640 x 480</a>
<li>
<a href="javascript: test.resizeTo(800, 600);">
800 x 600</a>
</ul>
<a href="javascript:test.close();">
<b>Close test window</b></a>
</body>
</html>
Consider the following example, which allows you to input height and width values into a form, and uses these values to adjust the target window's height and width appropriately:
<html>
<head>
<script language="JavaScript">
var test = window.open('', 'test');
function changeSize()
{
var width=document.forms[0].winwidth.value;
var height=document.forms[0].winheight.value;
test.resizeTo(parseInt(width), parseInt(height));
}
</script>
</head>
<body>
<form>
Width
<input type="text" size="3" name="winwidth">
Height
<input type="text" size="3" name="winheight">
<input type="button"
onClick="javascript:changeSize()"
value="Change Window Size">
</form>
</body>
</html>
Next: Bar Tales >>
More JavaScript Articles
More By Nariman K, (c) Melonfire
/ 103 
