Home arrow JavaScript arrow Page 3 - Controlling Browser Properties with JavaScript

Moving Windows - JavaScript

Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.

TABLE OF CONTENTS:
  1. Controlling Browser Properties with JavaScript
  2. Starting at the Top
  3. Moving Windows
  4. Bar Tales
  5. Navigating the Family Tree
  6. Location is Everything
  7. History Lesson
  8. Down to the Document
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 120
February 02, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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</bto:
 
<
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>



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: