Changing jQuery UI dialog size from an outside function after creation

I was unable to figure out why calling setMainWindowSize below from outside of the jQuery function will not work. Somebody help? Thank you.

<script type="text/javascript">
    var mainWindowDiv =  $('<div />', {'id': 'mainWindow', 'title': 'Main Window'});
    $(function (){
            $('body').append(mainWindowDiv);
            mainWindowDiv.dialog({
                position: 'center',
                resizable: true,
            });
            //this would wo开发者_C百科rk
            setMainWindowSize(800,600);
    });

    function setMainWindowSize(width, height)
    {
        mainWindowDiv.dialog('option', 'width', width);
        mainWindowDiv.dialog('option', 'height', height);
    };

    //this will fail
    setMainWindowSize(800,600);
</script>

i believe that $(function (){ waits for the document to be ready before firing. the setMainWindowSize(800,600); you have at the end fires off first since its outside of the ready function.

ideally you would have your all of your code inside your $(function(){ });

setMainWindowSize(800,600); should be called after the DOM is ready. Here you're calling it even before the div contains a dialog box.