How to increase height and width of jquery dialog dynamically with some effect

Question

when i show 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 load the data in the background and when the data is fully loaded, since jquery ajax has a successful option, and from there we can determine that the data is loaded, then I will show this data in my dialog box. suppose the data that I want to show in the dialog box so that the data needs more space, such as height, should be 300 and the width should be 300. Therefore, when I go to big data in the dialog box, the dialog will be automatically changed or not?

If not, how can I programmatically increase the height and width of the dialog box, for example, the height and width gradually increase, and the data will appear in the dialog box with the fadein effect .... how to do it. need help with some code. thanks

Answer 1

First, calculate the height of the hidden dialog item. Before setting the width to 300 pixels, but without height, add the ui-widget class.

HTML:

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

CSS

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

JS (16px is a dialog add-on):

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

After creating the dialog, set a new width for the dialog wrapper and start the animation if the current height is less than the calculated one.

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 you can somehow calculate it, you can use http://api.jquery.com/animate/

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