Previous Page
Next Page

Opening Windows in a Specified Location

Sometimes you want to open a window in a particular spot on the screen. In this example, you'll have your choice of opening a small window in any of the four corners of your screen. Like the previous example, we also provide a link to close the child window. The HTML is similar to previous examples, as shown in Script 6.12. As you would expect, each of the links is tagged with its own unique id. The JavaScript, in Script 6.13, builds on Script 6.11.

Script 6.12. This script opens a child window at a specified screen location.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Window Test</title>
     <script language="Javascript"  type="text/javascript"  src="script08.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <div align="center">
         <h1>Let's play with windows!</h1>
         <h3>
             <a href="#" id="topLeftWin"> Open window in the top left </a>&nbsp;&nbsp;
             <a href="#" id="topRightWin"> Open window in the top right</a> <br />
             <a href="#" id="bottomLeftWin"> Open window in the bottom left </a>&nbsp;&nbsp;
             <a href="#" id="bottomRightWin"> Open window in the bottom right </a><br />
             <a href="#" id="closeWin">Close the window</a>
         </h3>
     </div>
</body>
</html>

Script 6.13. This script adds window-moving capability to Script 6.12.

[View full width]
var newWindow = null;
window.onload = newWinLinks;

function newWinLinks() {
     for (var i=0; i<document.links.length; i++) {
        document.links[i].onclick =  chgWindowState;
     }
}

function windowOpen() {
     if (newWindow && !newWindow.closed) {
        return true;
     }
     return false;
}

function chgWindowState() {
     if (this.id == "closeWin") {
        if (windowOpen()) {
           newWindow.close();
        }
        else {
           alert("The window isn't open");
        }
        return false;
     }
     if (this.id != "closeWin") {
        if (windowOpen()) {
            alert("The window is already open!");
            return false;
        }
     }

     var topPos = (this.id.indexOf("bottom") == -1)? 0 : screen.availHeight-200;
     var leftPos = (this.id.indexOf("Right") == -1)? 0 : screen.availWidth-300;

     newWindow = window.open("","newWin", "toolbar,location=yes,width=300, height=200,
left="+leftPos+",top="+topPos);
     return false;
}

To open a window in a particular location:

1. 
if (this.id != "closeWin") {



Where Script 6.11 looked to see if this.id was openWin, now we're just checking to see that it's not closeWin. That's because it could be one of several different links.

2. 
var topPos = (this.id.indexOf ("bottom") == -1) ? 0 : screen. availHeight-200;
var leftPos = (this.id.indexOf ("Right") == -1) ? 0 : screen. availWidth-300;



We're creating two new variables, topPos and leftPos, based on screen.availHeight and screen.availWidth. Each of these lines is a conditional statement, using the alternative method of writing an if...else conditional we described in the "There's No One Right Way" sidebar in Chapter 2. Here's the way it works: if the word "bottom" is in the id (that is, id as specified in Script 6.12 is either bottomLeftWin or bottomRightWin), we know that the newly opened window needs to be pegged to the bottom of the screen. So, topPos will be set to whatever the available height is of the screen minus 200 (the height of the window being opened). If "bottom" isn't in the id (causing the indexOf() check to return -1, meaning not found), then topPos is set to zero, because it should be pegged to the top of the screen. And ditto for leftPos and "Right".

3. 
[View full width]
newWindow = window.open("","newWin", "toolbar,location=yes,width=300, height=200
,left="+leftPos+", top="+topPos);



Finally, we open the new window in its correct location, and again, the toolbar and location are visible (Figure 6.12).

Figure 6.12. The links in the parent window open a child window in the specified spot on your screen.

[View full size image]


Tip

  • The availHeight and availWidth properties look at only one monitor at a time, so if you have a multi-monitor setup, you can't suddenly make a window fly somewhere else; the windows will open on the same monitor that the parent window is on.



Previous Page
Next Page