Determining the Screen Dimensions

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:

screen.height;

Add the variables screenHeight and screenWidth to your JavaScript, and assign to them the values screen.height and screen.width, respectively. These variables will now record the total height and width of the screen, in pixels (Code 13.5).

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]

<!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 &amp; Ajax | Finding the Screen Dimensions</title> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } </style> </head> <body onresize="self.location.reload()"> <script type="text/javascript"> <!-- var screenHeight = screen.height; var screenWidth = screen.width; var liveScreenHeight = screen.availHeight; var liveScreenWidth = screen.availWidth; document.writeln('Your total screen height is ' + screenHeight + 'px <br><br>'); document.writeln('Your total screen width is ' + screenWidth + 'px <br><br>'); document.writeln('Your live screen height is ' + liveScreenHeight + 'px <br><br>'); document.writeln('Your live screen width is ' + liveScreenWidth + 'px <br><br>'); //--> </script> </body> </html>

screen.availHeight;

Add the variables liveScreenHeight and liveScreenWidth to your JavaScript, and assign to them the values screen.availHeight and screen.availWidth, respectively.

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.