Need to increase height & width of jquery dialog with animate function

Question

i am showing jquery dialog with initially small height & width which appear center of screen. after some time i insert of a invisible div content into dialog and increase dialog height & width with animate function.

here is the code

<script type="text/javascript">
     $(document).ready(function () {

         $("#dialog").dialog({
             autoOpen: false,
             bgiframe: true,
             height: 85,
             width: 200,
             modal: false,
             draggable: true,
             resizable: false,
             position: 'center',
             show: {
                 effect: "fade",
                 duration: 1000
             },
             hide: {
                 effect: "fade",
                 duration: 500
             },
             open: function (type, data) {
                 $(this).parent().appendTo("form");
             }
         });



         $("#btnfax").click(function () {
             $(".ui-dialog").css({ position: 'fixed', top: '50%', left: '50%', marginleft: '-100px', margintop: '-50px' });
             $("#dialog").removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles').html('');
             $("#dialog").dialog("open")

             $.doTimeout(1000, function () {
                 $("#dialog").html($('#content').html());


                 $(".ui-dialog").animate({
                     left: (($(window).width() - $('#dialog').outerWidth()) / 2) + 'px', // or you might want to use .outerWidth()
                     top: (($(window).height() - $('#dialog').outerHeight()) / 2) + 'px',
                     height: (($('#dialog').outerHeight() -  $('#content').outerHeight()) + $('#content').outerHeight()) + 'px',
                     width: (($('#dialog').outerWidth() - $('#content').outerWidth()) + $('#content').outerWidth()) + 'px'
                 }, 500,
                function () {
                     $("#dialog").removeClass("BusyStyles").find('#FaxMain').fadeIn(2000);
                });

             });
             return false;
         });

     });
 </script>

i want to increase dialog height & width in such way as a result my div content will show properly inside dialog but i am not being able to do so. when dialog is showing then its height & width is 85 & 200 but my div size is 300/300. i need to increase dialog height & width in such a way as a result my 300/300 div will be shown inside in dialog properly. i use animate function as a result height & width will increase with bit of animation and also it will show at center of page. so please guide me what logic i use to increase dialog height & width as a result my div content will show inside in dialog and also dialog should appear at center of page along with increasing height & width. please rectify area in my code where i use animate function to increase dialog height & width. thanks

this area code need to be rectified

$(".ui-dialog").animate({
                 left: (($(window).width() - $('#dialog').outerWidth()) / 2) + 'px', // or you might want to use .outerWidth()
                 top: (($(window).height() - $('#dialog').outerHeight()) / 2) + 'px',
                 height: (($('#dialog').outerHeight() -  $('#content').outerHeight()) + $('#content').outerHeight()) + 'px',
                 width: (($('#dialog').outerWidth() - $('#content').outerWidth()) + $('#content').outerWidth()) + 'px'
             }, 500,
            function () {
                 $("#dialog").removeClass("BusyStyles").find('#FaxMain').fadeIn(2000);
            });

please have look & advise. thanks

Sean Sean · Accepted Answer · 2013-05-16T12:54:09

This worked for me:

$("#dialog").parents(".ui-dialog:first").animate({
    width: '600px',
    height: '500px'
}, {
    duration: 500,
    step: function () {
        $("#dialog").dialog('option', 'position', 'center');
    }
});

Need to increase height & width of jquery dialog with animate function

2 Answers