DHTML Lab - dhtmlab.com - DHTML Diner - NS4: Ensuring DHTML Layout on Resize | 4

This is a Netscape Navigator 4 technique. The in-page examples will only work in Navigator 4 versions with the bug (ex. v4.04).

Ensuring DHTML Layout on Resize (4)

As stated on the first page, to ensure DHTML layout, we must reload the page. Our short script then looks like this:

origWidth = innerWidth;
origHeight = innerHeight;

function reDo() {
   if (innerWidth != origWidth || innerHeight != origHeight) 
      location.reload();
}
onresize = reDo;

Reload for Navigator 4 Only

In a cross-browser script, we would make the above code available only to Navigator 4. See Browser Variables, in DHTML Diner, for a discussion of our preferred browser detection variables. The final script would be:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
   NS4 = document.layers;
   if (NS4) {
      origWidth = innerWidth;
      origHeight = innerHeight;
   }
function reDo() {
   if (innerWidth != origWidth || innerHeight != origHeight) 
      location.reload();
}
if (NS4) onresize = reDo;
//-->
</SCRIPT>

Notice that we do not need to re-declare origWidth/origHeight, since we reload the page! We would need them, however, if the statements executed kept us in the same page.

Bugless Versions

Versions of Navigator 4 without the bug are not affected by our script. Versions with the bug have the bug fixed. It is therefore prudent to include the script in all your DHTML pages.

For One-Line Freaks Only

Since we highly recommended that the above script be included in ALL DHTML pages, we have shortened it to a one-line version, which we will not elaborate on, but advanced scripters should be able to follow the logic. For the rest of you, a cut and paste will suffice: