The screenthat glowing, slightly rounded panel you stare at all dayis where all the windows that make up your Web site reside. You can try making Web sites with Morse code or punch cards, but trust me on this one: The computer monitor is currently the best medium for displaying Web sites.
One of the frustrations of Web design, however, is never knowing the size of the area in which your design will be placed or how much space is actually available. To find out how much space you're working with, you can use the screen.width and screen.height objects (Figure 13.16) to find the total dimensions of the screen, and the screen.availWidth, and screen.availHeight (Figure 13.17) objects to find the actual available space on the screen, once menus and other interface elements are taken into account (Figures 13.18 and 13.19).
Figure 13.16. The general syntax for the width and height objects.
Figure 13.17. The general syntax for the availWidth and availHeight objects.
Figure 13.18. The live area of the Windows screen includes everything but the bottom menu bar. However, this bar may appear on any side of the screen at the user's discretion.
Figure 13.19. The live area of the Mac OS X screen is everywhere but the top menu bar and approximately 6 pixels on the left and right sides. The Mac OS always displays a menu bar at the top of the screen.
So why don't you just ask the screen how big it is (Figure 13.20)?
Figure 13.20. The code displays both the total and live dimensions of the screen for my computer.
To find the screen's dimensions:
Code 13.5. This code determines both the total and the live dimensions of the entire screen and assigns these values to variables, which it then uses to write the values in the browser window.
[View full width]
These variables will now record the live (available) height and width of the screen, in pixels. This differs from the total, in that it does not include any menu bars added by the OSonly the area in which windows can be displayed.