Moving or resizing windows may be something your scripts will need to know about. A move is generally harmless, but a resize may not be so benign to your page content. This event trigger provides a means to fix up the display if the window aspect ration or size is changed.

This event is triggered when a window is enlarged or reduced in size.

The handler is registered by defining it with an HTML tag attribute. The handler can also be registered by assigning the function object to the onresize property of the window.

The event is also triggered when a window is resized under control of a script with the resizeTo() or moveBy() methods.

Warnings:

• There are numerous issues with onResize events in Netscape 4.0. In particular, an onResize causes Netscape to "forget" positioning information for <LAYER> objects and absolutely positioned <DIV> blocks.

• This could be fixed by simply making this assignment:

  self.onresize = self.reload;

  This attaches a reload call to the resize event handler. However registering event handlers in this way on Netscape prior to version 6.0 has proven to be inconsistent. In this particular case it will cause a browser-crashing endless loop.

• The crashing only happens on some versions of Netscape 4.0. The problem is caused because the resize event handler will fire a second Resize event when the window scrollbars are drawn once the page is loaded - odd behavior. We've sat in front these browsers for years now and watched Netscape draw a page, then realize it can't fit all the content in and so decide it needs scroll bars and draw it all again. However, up until recently we never realized that an onResize was being triggered as well - if only we had a generic event watcher of some kind so we could see what is going on behind the scenes!

• Anyway, the example suggests a fix and was provided by Jon Stephens. This demonstrates other subtle and neat tricks such as storing persistent values as member properties of the function object itself.

Example code:

   // This checks to see if the window's dimensions have

   // actually changed (because Netscape often fires a

   // false onResize event when it forms scrollbars);

   // if the dimensions have changed, the document is

   // reloaded.

   // Note that document.location is not supposed to be

   // settable, but here's another case where the

   // implementation does not match the specs.

   function resizeFix()

   {

      if((document.resizeFix.initWidth  != window.innerWidth) ||

         (document.resizeFix.initHeight != window.innerHeight))

      {

         document.location = document.location;

      }

   }

   // This function checks to see if the browser supports the

   // Layer object (i.e., Netscape 4.X);

   // If it does, then it creates a new object with properties

   // to hold the current window width & height and assigns

   // the resizeFix() function to the window's onResize event.

   function checkBrowser()

   {

      if(document.layers)

      {

         if(typeof document.fix == "undefined")

         {

            document.resizeFix = new Object();

            document.resizeFix.initWidth  = window.innerWidth;

            document.resizeFix.initHeight = window.innerHeight;

         }

         window.onresize = resizeFix;

      }

   }

   // This calls the browser check function above

   checkBrowser();

Supported by objects:

APPLET

AREA

BUTTON

DIV

FIELDSET

FRAMESET

IMG

Input

MARQUEE

Select

TABLE

TD

Window