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.

Answer 2

I think your problem here is the use of $(window).width() and $(window).height(). To get the window size and height, use this instead:

width = $(document).width();
height = $(document).height();