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

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 (3)

Recall that the syntax for handling the resize event is:

   function resizeHandler() {
      ...statements to execute on a resize...
   }
   window.onresize = resizeHandler;

To work around the bug, we must alter the syntax to:

   function resizeHandler() {
      ...if a true resize event occured, then...
      ...statements to execute on a resize...
   }
   window.onresize = resizeHandler;

We must, therefore, ensure that the resize event is a real one, instigated by a user resizing of the browser window, before any function statements are executed. To do this, we must verify if the size of the window has changed! We'll need to compare the size of the window before and after the event.

Early in our page, we create two variables, origWidth and origHeight to store the original width and height of the browser window:

origWidth = innerWidth;
origHeight = innerHeight;

Then we simply compare the value of these variables to the window width and height after a resize. If either dimension is different, it means a true resize has occured, and we can execute our statements. We also re-declare the origWidth/origHeight variables to store the new resized window dimensions, to use when the next resize occurs.

   function resizeHandler() {
      if (innerWidth != origWidth
          || innerHeight != origHeight) {
               origWidth = innerWidth;
               origHeight = innerHeight;
               ...statements to execute on a resize...
      }
   }
   window.onresize = resizeHandler;

Alternately, the function can look like this, returning if a match is found, and doing nothing:

   function resizeHandler() {
      if (innerWidth == origWidth
          && innerHeight == origHeight) return
               origWidth = innerWidth;
               origHeight = innerHeight;
               ...statements to execute on a resize...
   }
   window.onresize = resizeHandler;

Whichever syntax you use, your handler function will execute its statements only if a true resize has occured, avoiding the bug.

On the final page, we'll use what we have learned to create a simple bug-proof handler for the resize event that will ensure our DHTML layout remains intact.