JavaScript Animations, Part II: Resizing the Page - Doc JavaScript

Resizing the Page

In Navigator 4.0x, a dynamic content layout is lost when the user resizes the browser window. In order to restore the layout of the page, we must reload the page when a resize event occurs:

if (NS4) onresize = redo;
function redo() {
  location.reload();
}

We set the onresize event handler to redo, so the redo() function is invoked when the window is resized. It, in turn, reloads the page by calling the built-in location.reload() method.

In Navigator 4.0x, a resize event occurs when the page loads, immediately after the load event. So when the redo() function reloads the page, the onresize event handler is triggered again, causing an endless loop. As a matter of fact, the loop starts when the page is first loaded, because the "side-effect" resize event occurs when the page loads.

The workaround is just as simple. We need to set the onresize event handler after the page loads, so the "side-effect" resize event doesn't trigger it. We'll use the well-known setTimeout() function to achieve our goal:

if (NS4) onload = init;
function init() {
  setTimeout("onresize = redo", 1000);
}
function redo() {
  location.reload();
}

The Dynamic HTML Lab has more information on the onload/onresize bug.

Created: May 21, 1998
Revised: May 21, 1998

URL: https://www.webreference.com/js/column19/resize.html