$(window).resize() and Internet Explorer 8

I am almost done with my consumer preview (aka beta) of my interactive HTML5 chart using Raphahël SVG (which I post about it last week). Then I realize that I should test the chart again on IE8.

I use the IE Developer tools (which you can activate by pressing F12 key) to change my current IE9 to 7 and 8 which majority of my users are still using. I have tested the chart before and for IE7 and IE8 which does not support SVG, Raphaël just generates VML and the chart looks pretty much the same.

To make it more responsive to different size of the user’s browser windows as well as their screen resolution, later, I use the JQuery resize() function to detect the window resize event and act accordingly (i.e., clear the chart, re-calculate chart items size and location, and redraw those items).

What happen was that IE8 fires resize event even when any elements on the page is resized which can be triggered by changes of many things such as height, style attributes, and so on. So when my JavaScript/Raphaël performs redraw actions, the resize event is fired again and again and again (infinite loop)!

Fortunately, this can be resolved by simple tricks of checking if the width or height of the browser window really change or not. Here is the code.


var currentHeight;
var currentWidth;

$(window).resize(function () {
   var windowHeight = $(window).height();
   var windowWidth = $(window).width();

   if (currentHeight == undefined || currentHeight != windowHeight
      || currentWidth == undefined || currentWidth != windowWidth) {

      // redraw the chart here will make IE8 fire resize event again
      // ...

      currentHeight = windowHeight;
      currentWidth = windowWidth;
   }
});

That is it. You might remember the old day with all alert statement in your JavaScript code. Debugging JavaScript was very painful when before Firebug has been introduced. Thankfully, we can easily debug JavaScript today as most new browsers are now equipped with JavaScript debugger. Enjoy coding!

Advertisements

One thought on “$(window).resize() and Internet Explorer 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s