The onresize event

Netscape 4.x had a well-known bug where dynamic content wasn’t redrawn when a Web page was resized. Scripts 9.3 and 9.4 force the page to reload its contents to avoid this problem. Thankfully, Netscape versions 6 and later no longer suffer from this bug.

1. 
window.onresize = resizeFix;



The event handler is attached to the window object and calls the resizeFix function.

2. 
if (document.layers) {



We only want to do the following if the user has Netscape 4.x, and this is the simplest way to check that. The document.layers object only ever existed in this browser.

3. 
var origWidth = window.innerWidth;
var origHeight = window.innerHeight;



If we’re in Netscape 4.x, we want to save the current height and width of the browser window for later use.

Script 9.3. This HTML includes the JavaScript hidden inside a multi-line comment, since it’s meant for use in older browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>onResize Netscape fix</title>
     <script type="text/javascript" src="script02.js"></script>
</head>
<body bgcolor="#FFFFFF">
     <h1>
     <script type="text/javascript">
        <!-- Hide code from older browsers

        document.write("This is dynamic content")

        // Stop hiding code -->
     </script>
     </h1>
</body>
</html>

Script 9.4. You can fix Netscape 4.x’s dynamic content redraw bug with this script.
window.onresize = resizeFix;
								if (document.layers) {
								var origWidth = window.innerWidth;
								var origHeight = window.innerHeight;
}

function resizeFix() {
								if (document.layers) {
								if (window.innerWidth != origWidth || window.innerHeight != origHeight) {
								window.location.reload();
        }
     }
}

4. 
function resizeFix() {



Here’s where we actually handle the browser being resized.

5. 
if (document.layers) {



Again, check to make sure that this only happens if they are using Netscape 4.x.

6. 
if (window.innerWidth != origWidth || window.innerHeight != origHeight) {



If they came in here and either the height or the width of the window has changed, the user resized the window, and we want to force the page to reload. If the browser window size hasn’t changed, the onresize handler was triggered by Netscape drawing the scrollbars, and it can be ignored.

7. 
window.location.reload();



Reload the page if the user actually did resize the window (Figure 9.2).

Figure 9.2. The reloaded (but still kind of dull) page.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.71.64