Determining the Browser Window s Dimensions


Determining the Browser Window's Dimensions

The browser window's current width and height can be determined. (Note: Internet Explorer does not support this JavaScript code.) This information is the total width and height of the browser window, including all the controls around the display area, and can be accessed using the outerHeight and outerWidth objects (Figure 13.21).

Figure 13.21. The general syntax for the outerWidth and outerHeight objects.


In this example (Figure 13.22), the browser windows dimensions are displayed when the page loads. Resizing the window and reloading the page will show the new dimensions (Figure 13.23).

Figure 13.22. The code displays the dimensions of the browser window.


Figure 13.23. When the page is resized, the values will change.


To find the browser window's dimensions:

1.

window.outerHeight


Create a function that returns the value of the outer height of the window. This value is in pixels (Code 13.6).

Code 13.6. The functions findBrowserHeight() and findBrowserWidth() return the dimensions of the browser window in pixels. Another feature I added to this code is that when the page is resized, the values are recalculated by reloading the page.

[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 Browser 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> <script type="text/javascript"> function findBrowserHeight() {      if (window.outerHeight != null)         return window.outerHeight;      return null; } function findBrowserWidth() {      if (window.outerWidth != null)         return window.outerWidth;      return null; } </script> </head> <body onresize="self.location.reload()"> <script type="text/javascript"><!-- browserHeight = findBrowserHeight() ; browserWidth = findBrowserWidth(); if (browserWidth!= null) { document.writeln('Your total browser width is ' + browserWidth + 'px <br><br>'); } else {document.writeln ('The browser window\'s width can not be determined.'); } if (browserHeight!= null) { document.writeln('Your total browser height is ' + browserHeight + 'px <br><br>'); } else {document.writeln ('The browser window\'s height can not be determined.<br><br>'); } //--> </script> </body> </html>

2.

window.outerWidth


Create a function that returns the value of the outer width of the browser window. This value is in pixels.

Tip

  • The live area of the browser window can be determined in both Internet Explorer as well as other browsers (see the following section, "Determining the Page's Visible Dimensions").





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net