| When you create a user interface on the Web, it's often helpful to position the browser window on the visitor's computer screen, or to be able to have the browser window move by a certain amount. This is especially useful if your site will be opening multiple windows and you want to set an initial position so that the windows don't crowd one another (see the previous section). The moveTo and moveBy methods provide this control. In this example (Figure 17.10), two controls are provided for functions that calculate a new position for the window, which is based on the available screen width and height (see "Determining the Screen Dimensions" in Chapter 13). Figure 17.10. The initial position of the browser window on the screen. 
To set the position of a window on the screen: | | 1. | function moveWindowTo() {...}
Add the moveWindowTo() function to your page (Code 17.9).
Code 17.9. The JavaScript functions moveWindowTo() andmoveWindowBy() move the entire browser window to a certain position on the screen or by a specific amount.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Moving the Browser Window</title> <script type="text/javascript"> function moveWindowTo() { nX = Math.abs(screen.availWidth/10); nY = Math.abs(screen.availHeight/10); moveTo(nX,nY) } function moveWindowBy() { dX = Math.abs(screen.width/10); dY = Math.abs(screen.height/10); moveBy(dX,dY) } </script> </head> <body> <div > <b>Window Controls</b> || <a href="#" onclick= "moveWindowTo(0,0);return false;">Move To Top/Left </a>| <a href="#" onclick= "moveWindowBy();return false;">Move By Amount</a> </div> <div > <img src="/books/3/292/1/html/2/alice42.gif" height="480" width="360" alt="Alice" /> </div> </body></html>
|
This uses the built-in JavaScript method moveTo, which tells the browser window to move its top-left corner to the calculated x,y (nX and nY) coordinates in relation to the top-left corner of the live screen area (Figure 17.11).
Figure 17.11. After the window has been moved to 10 pixels from the left edge of the screen and 15 pixels from the top. 
| 2. | function moveWindowBy() {...}
Add the moveWindowBy() function to your JavaScript. This uses the built-in JavaScript method moveBy, which moves the browser window by the calculated x,y amounts (dX and dX) indicated (Figure 17.12).
Figure 17.12. After the browser window has been moved an additional 10 pixels over and 15 pixels down. 
| 3. | onclick="moveWindowTo(0,0); return false;"
Add controls to trigger the functions from Steps 1 and 2.
|
 Tips
These functions are best used to move a window when it first opens. You do so by placing the moveTo() or moveBy() code in an onload event handler in the <body> tag, as shown in the previous section. If you really want to have some fun with your visitor, use the animation script shown earlier in this chapter with the moveBy() function to have the window move around on the screen or even appear to vibrate. These functions will not work in Opera, and visitors can disable these functions in Mozilla browsers.
|
