how to increase jquery dialog height & width dynamically with some effect

Question

when i am showing my dialog then my dialog height is 100 and width is 100 like

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

and loading data in background and when data is fully loaded because jquery ajax has success option and from there we can determine data is loaded then i will show those data into my dialog. suppose the data which i want to show into dialog that data need more space like height should be 300 and width should be 300. so when i will pace that big data into dialog then dialog will be re-size automatically or not?

if not then how can i programatically increase dialog height and width some effect like gradually height and width will increase and data will appear into dialog with fadein effect....how to achieve it. need help with some code. thanks

Answer 1

First calculate the height of the hidden dialog element. Before set the width to 300px, but no height and add the class ui-widget.

HTML:

<div id="dialog" class="ui-widget">...

CSS:

#dialog {
    display: none;
    width: 300px;
}

JS (16px are the dialog padding):

var iHeight = $('#dialog').height() + 16;

After the dialog is created, set the new width for the dialog wrapper and start an animate if the current height is lower then the calculated.

JS:

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

Also see my jsfiddle.

=== UPDATE ===

My updated jsfiddle.

Answer 2

If you know the height/width or can calculate it somehow then you can use http://api.jquery.com/animate/

$('#yourDiv').animate({height: '400px', width: '200px'});