jQuery IE7 size wont update when switching between px and % values on window resize

Question

I'm making a jQuery plugin for full browser flash, which has a minimum size limit, say 800x600, so if the browser is over 800x600 the containing div is set to 100% width/height, it's it's below that size, it's set to 800x600.

(function ($, fullFlashMinSize) {
    var getWindowSize = function ()
    {
     return { 
      width: $(window).width(), 
      height: $(window).height() 
     };
    }; 

    $.fn[fullFlashMinSize] = function ( minWidth, minHeight )
    {
     // clean up CSS of container
     this.css(
      {
       'width': '100',
       'height': '100%',
       'overflow': 'hidden',
       'background-color':'#0f0'
      }
     );

     // clean up html,body css
     $('html').css(
      {
       'width': '100%',
       'height': '100%',
       'overflow': 'auto'
      }
     );

     $('body').css(
      {
       'width': '100%',
       'height': '100%',
       'overflow': 'auto',
       'margin': '0px',
       'padding': '0px'
      }
     );

     var elem = this;
     var minSize = { width: minWidth, height: minHeight };

     var resizeFn = function()
     {
      var currSize = getWindowSize();

      if( currSize.width < minSize.width )
       elem.width( minSize.width );
      else
       elem.width( '100%' );

      if( currSize.height < minSize.height )
       elem.height( minSize.height );
      else
       elem.height( '100%' );

      //window.status  = ( currSize.width + ' : ' + currSize.height );
      if( $.browser.safari )
      {
       var widerThanBrowser = currSize.width < minSize.width && currSize.height > minSize.height;
       var tallerThanBrowser = currSize.width > minSize.width && currSize.height < minSize.height;

       if( widerThanBrowser )
       {
        $('body').css( { 'overflow-x': 'auto', 'overflow-y': 'hidden' } );
        elem.height( currSize.height - 12 );
       }
       else if( tallerThanBrowser )
       {
        $('body').css( { 'overflow-x': 'hidden', 'overflow-y': 'auto' } );
        elem.width( currSize.width - 12 );
       }
       else
       {
        $('body').css( { 'overflow': 'auto' } );
       }
      }  
     };

     // initial call
     resizeFn();
     // on resize
     $(window).resize( resizeFn );
    };
}(jQuery, 'fullFlashMinSize'));

Works perfecly in all the browsers i have tested, apart from IE7 on XP, where the div will never resize beyond the first time this method is called (on DOM ready).

any ideas?

It appears that in IE, when I stored a direct reference var:

var elem = this;

and access that inside the resizeFn function, it is still a jQuery object, but no results come out properly.

I've changed to this

(function ($, fullFlashMinSize) {
var getWindowSize = function ()
{
 return { 
  width: $(window).width(), 
  height: $(window).height() 
 };
}; 


$.fn[fullFlashMinSize] = function ( minWidth, minHeight )
{
 // clean up CSS of container
 this.css(
  {
   'width': '100',
   'height': '100',
   'overflow': 'hidden'
  }
 );

 // clean up html,body css
 $('html').css(
  {
   'width': '100%',
   'height': '100%',
   'overflow': 'auto'
  }
 );

 $('body').css(
  {
   'width': '100%',
   'height': '100%',
   'overflow': 'auto',
   'margin': '0px',
   'padding': '0px'
  }
 );

 var elemRef = '#' + $( this ).attr( 'id' );

 var minSize = { width: minWidth, height: minHeight };

 var resizeFn = function()
 {
  var elem = $(elemRef)[0];
  var currSize = getWindowSize();

  if( currSize.width < minSize.width )
   $(elem).width( minSize.width );
  else
   $(elem).width( '100%' );

  if( currSize.height < minSize.height )
   $(elem).height( minSize.height );
  else
   $(elem).height( '100%' );

  if( $.browser.safari )
  {
   var widerThanBrowser = currSize.width < minSize.width && currSize.height > minSize.height;
   var tallerThanBrowser = currSize.width > minSize.width && currSize.height < minSize.height;

   if( widerThanBrowser )
   {
    $('body').css( { 'overflow-x': 'auto', 'overflow-y': 'hidden' } );
    elem.height( currSize.height - 12 );
   }
   else if( tallerThanBrowser )
   {
    $('body').css( { 'overflow-x': 'hidden', 'overflow-y': 'auto' } );
    elem.width( currSize.width - 12 );
   }
   else
   {
    $('body').css( { 'overflow-x': 'auto', 'overflow-y': 'auto' } );
   }
  }  
 };

 // initial call
 resizeFn();
 // on resize
 $(window).resize( resizeFn );
};

}(jQuery, 'fullFlashMinSize')); And it's pretty ugly, and not massively extendable. hmm.

Any more info?

Answer 1

Have you tried using outerWidth(), outerHeight(), innerWidth(), innerHeight()? They have worked well for me.