Categories World Wide Web

Continued from Building Blocks

Now that you know how to set style rules, you can use this knowledge to create a customizable Web site. IE and Navigator 4.0 or later provide a set of objects and attributes that make Web-site customization a whole lot easier. One of these objects is screen. Use screen to tailor your Web site based on users' monitor settings. For example, if a user's screen width is less than 800 pixels, use one font type and size. Otherwise, use a different font type and size.

The core screen properties supported by both IE and Navigator are width for determining screen width, height for determining screen height, and colorDepth for determining the bit depth of the color palette. You'll find colorDepth useful if you are concerned with how images look when dithered to a lower bit-depth. If you have a high-resolution 24-bit image that is unreadable when dithered to an 8-bit palette, for example, you may want to swap in a completely different image for users with a lower color depth.

Although screen is useful for determining monitor settings, the object doesn't tell you the dimensions of users' browser windows. A user may have a screen size of 800-by-600 but only 640-by-340 of usable space within the browser window. This same user may also have resized his browser so that only a 480-by-250 area is available for viewing documents. Fortunately, both Internet Explorer and Netscape Navigator provide ways of determining the actual amount of screen real estate available to the browser.

In IE, you have several different ways of determining the size of the browser window. body.offsetWidth and body.offsetHeight tell you the edge-to-edge width and height of the browser window. body.clientWidth and body.clientHeight tell you the width and height available to documents (meaning space allocated to margins, scroll bars, or toolbars is not counted). Navigator has similar properties. window.outerWidth and window.outerHeight provide edge-to-edge values. window.innerWidth and window.innerHeight provide internal values.

Once you obtain size values for the browser window, use these values to tailor the document. Set the font size for headers, paragraphs, and other text elements. Choose alternate banners, images, and mappings. Resize tables, divisions, and layers precisely. Figure 2 shows how you can dynamically customize a Web page based on window size. Note that although Navigator lets you use a header-defined script, IE does not. In IE, window size properties can only be read from the document body or after the page has been loaded.

Next: A Site for All Seasons

Published as Internet Builder in the 5/4/99 issue of PC Magazine.

Related Links
• Server-Side JavaScript -- PC Tech
• DHTML That Works in Both IE and Navigator -- PC Tech
• JavaScript -- DevHead
• ScriptHead Archive -- DevHead
 
• JavaScript Programming Courses -- ZDU