Changing the Browser Window's Size When you open a new window, you can set the initial size of that window (see the earlier section, "Opening a New Browser Window"). However, most modern browsers (with the important exceptions of Microsoft Internet Explorer and Opera) allow you to resize the window dynamically after the window is open. In this example (Figure 17.13), controls are provided that allow the visitor to move the window, to resize the window to a specific size, to increase or decrease the size of the window, or to enlarge it to fill the entire screen. Figure 17.13. The initial size of the browser window. 
To change a window's size: | | 1. | function changeWindowSize (windowWidth, windowHeight) {...}
Add the function changeWindowSize() to your JavaScript (Code 17.10).
Code 17.10. The changeWindowSize(), magnifyWindow(), and fillScreen() functions control the browser window's size.| [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 | Changing A Window's Size</title> <script type="text/javascript"> function changeWindowSize (windowWidth,windowHeight) { if (window.outerWidth) { resizeTo(windowWidth,windowHeight); }} function magnifyWindow (dWindowWidth,dWindowHeight) { if (window.outerWidth) { resizeBy(dWindowWidth,dWindowHeight); }} function fillScreen() { if (window.outerWidth) { windowWidth = screen.availWidth; windowHeight = screen.availHeight; resizeTo(windowWidth,windowHeight); moveTo(0,0); }} </script> </head> <body> <div > Window Size || <a href="#" onclick="changeWindowSize(300,300);return false;";>Resize to 300 by 300</a> | <a href="#" onclick=magnifyWindow(30,30);return false;";>Increase</a> | <a href="#" onclick="magnifyWindow(-30, -30)">Decrease</a> | <a href="#" onclick="fillScreen()">Fill Screen</a> </div> <div > <img src="/books/3/292/1/html/2/alice04.gif" height="448" width="301" alt="Alice" /> </div> </body></html>
|
This function first uses feature sensing to see whether it can determine the outer width of the browser window. If so, this browser is capable of resizing the window (see "Determining the Browser Window's Dimensions" in Chapter 13). Then the function uses the resizeTo method to change the size of the window to windowWidth and windowHeight (Figure 17.14).
Figure 17.14. After the window has been resized to 300 x 300 pixels. 
| | | 2. | function magnifyWindow(dWindowWidth, dWindowHeight) {...}
Add the function magnifyWindow() to your JavaScript. This function first uses feature sensing to see whether it can determine the outer width of the browser window. If so, the browser window can be resized. The function will then use the JavaScript resizeBy method to add or subtract dWindowWidth and dWindowHeight to or from the window dimensions (Figure 17.15).
Figure 17.15. The window's size has been increased by 30 pixels in both dimensions. 
| 3. | function fillScreen() {...}
Add the function fillScreen() to your JavaScript.
This function first uses feature sensing to see whether it can determine the outer width of the browser window. If so, the browser window can be resized. The function then finds the width and height of the live screen area, moves the top-left corner of the window to the top-left corner of the screen, and resizes the window to the size of the live area of the screen (Figure 17.16).
Figure 17.16. The browser window fills the entire screen. 
| 4. | onclick="changeWindowSize(300, 300); return false;"
Add calls to the functions from Steps 1, 2, and 3, passing to each function the appropriate parameters. This function call can be associated with an event handler.
|
|
