DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum II (v3.02) | 2 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum II (v3.02) | 2


Hierarchical Menus Ver. 3 - Addendum II (v3.02)
improving an old bug fix and introducing a new one

The Navigator 4 "resize" bug is fully illustrated in the DHTML Diner.

The Navigator "resize" Bug - Recap

As we all know by now, Navigator loses all DHTML layout when the user resizes the browser window. To re-layout the page correctly, the page must be reloaded. To save our users the trouble, our best bet is to capture the resize event, and reload the page dynamically.

Unfortunately, many versions of Navigator 4 fire the resize event when scrollbars appear, as well as on a true resize. If we have specified a reload in our event handler, the page could very well reload endlessly.

We discuss this bug and the suggested fix in the recent DHTML Diner article, Ensuring DHTML Layout on a Resize. Please refer to it for a complete discussion and illustration of the bug.

In Previous Versions

Until now, we knew of the bug, but not its true nature. We had, therefore, included a fix based on the limited knowledge we had. It looked like this:

function startIt() {
   if (NS4) setTimeout("loader.onresize=reDo",2000);
function reDo(){

In our window.onload handler function, startIt(), we set the resize handler using a timeout. In the example above, it is set two seconds after the page loads. This worked for us because the handler was set after scrollbars appeared, avoiding the bug. In other words, it worked, but we really didn't know why. The use of setTimeout() was also, admittedly, a little clunky.

The New Code

In the DHTML Diner, we developed this much more elegant script:

if (NS4) {
    origWidth = innerWidth;
    origHeight = innerHeight;
    onresize = reDo;
function reDo() {
    if (innerWidth != origWidth || innerHeight != origHeight) 

The original (unresized) width and height of the window are recorded. When the resize fires and reDo() is called, we compare these original window dimensions to the post-resize ones. If they are different, a true resize has occured and the relevant statements are executed. All fake resize events do nothing.

Menu Script Incorporation

Our new script is incorporated, and made menu-specific, by first including these statements very early in hierMenus.js:

    origWidth = loader.innerWidth;
    origHeight = loader.innerHeight;
    loader.onresize = reDo;

The reDo() function is modified to read:

function reDo(){
    if (loader.innerWidth!=origWidth && loader.innerHeight!=origHeight) {

Now, if the user resizes the browser window, it will be identified as a true resize and reDo() will execute its statements. False resizes will do nothing.

On the final page, where the complete script is repeated, the exact position of the new script is highlighted. For now, let's solve the "double-link" problem.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Oct 04, 1998
Revised: Oct 04, 1998

URL: http://www.webreference.com/dhtml/column21/addendum2/col21addII2.html