Browser resize, iFrames, toggling the sidebar and JS debugging

A project that I am working on, teaches me some cool Javascript techniques every now and then. We needed to show a navigation area and the main content area. The obvious answer was to use frames. We also had to have something that can control both these frames. I decided on using iFrames since they would be flexible and serve the purpose of the project well.

There are two cool things that I want to write about today.

1. Toggling the display of iFrames – turn on the navigation frame or turn it off
2. Automatically resizing the frames when the browser size changes – user resizes, maximize window etc

The code will follow, but the major issues came up because of the differences between Firefox and IE. The window.onresize event fires when the window gets resized, and when you resize the iframe on that, you get another resize event. So this gets in a loop and can lead to a crash. Firefox emits the onresize event only once. The IE specific window.onresizeend event is sent only once – when the window is first opened – I did not get it even after resizing the window after the initial display.

The toggle seemed simple – make the visibility property of the iFrame style to either ‘visible’ or ‘hidden’ and I would have the toggle in place. That works, but only in Firefox! And then, what’s the use of hiding the navigation bar if your main frame does not expand to utilize the space created! So you need to resize the frames too!

Apart from all that, I also found a handy debugging method! If I printed all the properties of an object, I would be able to figure out a lot more on what’s happening and what’s available on a particular browser. Checkout the printVars() function in the code. We do something similar to that very often in PHP and Flash ActionScript and doing that in JavaScript was much better than using alert’s for debugging!

[html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[/html]

I am not putting in any code explanation here, hope you find the code easy to follow. You will need to create the nav.htm and main.htm files to test this.

Comments welcome!