MSC79.com

Using the onResize event

Thursday, May 15th, 2008

Whilst working on a design for a new site the other day, I was writing some Javascript to handle browser and screen sizes. This brought to light a frustrating problem with the way that Internet Explorer handles the onresize event.

Whereas Firefox and other browsers only fire this event when the application window is resized, Internet Explorer (both v6 and v7) interprets this event to include the resizing of the document body. Therefore, any browser window resizing results in two firings of the onresize event - one for the window and one for the body.

To combat this I scripted in an incrementing counter, and the relevant function is then only called the first time the onResize event is fired:

1. if (window.outerWidth) { // FF
2. var dim = window.outerWidth;
3. dimCheck(dim, 725, 800);
4. } else { // IE
5. if (i == 0) {
6. var dim = document.body.clientWidth;
7. dimCheck(dim, 625, 685);
8. i = 1;
9. } else if (i == 1) {
10. i = 0;
11. }
12. }

To ensure that subsequent window resizes function in the same way, the counter is reset again on the second firing. Whilst this is not the most elegant way of dealing with this problem, it does the job required of it.

Posted in Development, Javascript | No Comments »