Internet Explorer (IE) Resize Event
I was having some trouble resizing the elements in the window and calling a reload on our data, when the IE window was resized. The problem is that IE calls the resize event for many things including (but not limited to) whenever the window is actually resized OR whenever the content changes the size of the body element. This means that when the page was loading, we could get up to 8 different resize events firing one after another.
Note: DO NOT ATTACH AN alert() TO YOUR RESIZE EVENT LISTENER. You will become quickly frustrated.
I found an elegant and simple solution here: IE Resize Bug
The solution is fairly simple, check to see if the window size ACTUALLY changes, and then fire the function you want if it does. Here is a sample similar to how I implemented this code:
-
-
var g_prevSize = null;
-
-
function checkResize()
-
{
-
if (checkWindowChange())
-
{
-
funcToCallOnActualResize();
-
}
-
}
-
-
function checkWindowChange()
-
{
-
var currentSize = getViewportSize();
-
if (g_prevSize == null || (currentSize[0] != g_prevSize[0] || currentSize[1] != g_prevSize[1])) {
-
g_prevSize = currentSize;
-
return true;
-
} else {
-
return false;
-
}
-
}
The reason I differ from the Incoherent Babble post, is that I wanted to be able to check if the window resized in multiple places. So, I can call checkWindowChange() in multiple places. This can cause a little problem if you call it and the g_prevSize variable gets set before your resize functionality, so beware.
Sphere: Related Content