views:

664

answers:

3

The following code crashes IE6 every time. It keeps refreshing the page and crashes after a minute:

$(window).bind("load resize", function () {
    var hnf = $('#header').height() + $('#footer').height();
    $('#main').height($(window).height() - (hnf));
    $('.fluid').height($('#main').outerHeight());
    $('#content').width($('#main').width() - $("#aside").width() - 90);
});

..whats causing it?

EDIT: Okay the "resize" in $(window).bind("load resize", function () { is causing it, how do I fix?

Many thanks for your help!

+3  A: 

It looks as though IE6 incorrectly fires the onResize event even when the document body dimensions change. Here's a link with more information.

I would look for a non-jQuery way to do what you want. If you use CSS to control the fixed-size elements of your page, won't the browser take care of the variable-size elements on its own?

Drew Wills
Thanks, but I hardly know any JS to implement the fix on my code. Can you please help. Thanks!
Nimbuz
A: 

I think it might have to do with the fact that you are trying to set the height and width without CSS. I am not sure but if I was going to do it I would use the JQUERY .css() method to set he height and width. so it would look like this,

$(window).bind("load resize", function () {
    var hnf = $('#header').height() + $('#footer').height();
    $('#main').css("height", ($(window).height() - hnf));
    $('.fluid').css("height", ($('#main').outerHeight()));
    $('#content').css("width", ($('#main').width() - $("#aside").width() - 90));
});

This might not work I did not test it.

fiktion
nope, still the same. I've edited the original description.
Nimbuz
+2  A: 

The fix Drew Wills links to sounds like it should work. Try:

var prevHeight;
$(window).bind("load resize", function () {
  var height = $(window).height();
  if ( prevHeight == height ) 
     return; // hack to prevent recursion in IE6
  prevHeight = height;

  // resize content
  var hnf = $('#header').height() + $('#footer').height();
  $('#main').height(height - (hnf));
  $('.fluid').height($('#main').outerHeight());
  $('#content').width($('#main').width() - $("#aside").width() - 90);
});

Feel free to pretty that up a bit (attach prevHeight to something else, etc).

Shog9
Still crashes! :(
Nimbuz
In that case, you'll need something a bit more clever... Try the fix Drew Wills links to.
Shog9
Yep, indeed it works! Thanks heaps!! :)
Nimbuz