jQuery IE7 size wont update when switching between px and % values on window resize
<p>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.</p>

<pre><code>(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 &lt; minSize.width )
       elem.width( minSize.width );
      else
       elem.width( '100%' );

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

      //window.status  = ( currSize.width + ' : ' + currSize.height );
      if( $.browser.safari )
      {
       var widerThanBrowser = currSize.width &lt; minSize.width &amp;&amp; currSize.height &gt; minSize.height;
       var tallerThanBrowser = currSize.width &gt; minSize.width &amp;&amp; currSize.height &lt; 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'));
</code></pre>

<p>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).</p>

<p>any ideas?</p>

<p>It appears that in IE, when I stored a direct reference var:</p>

<pre><code>var elem = this;
</code></pre>

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

<p>I've changed to this</p>

<pre><code>(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 &lt; minSize.width )
   $(elem).width( minSize.width );
  else
   $(elem).width( '100%' );

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

  if( $.browser.safari )
  {
   var widerThanBrowser = currSize.width &lt; minSize.width &amp;&amp; currSize.height &gt; minSize.height;
   var tallerThanBrowser = currSize.width &gt; minSize.width &amp;&amp; currSize.height &lt; 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 );
};
</code></pre>

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

<p>Any more info?</p>
