How to get the height and width of a dialog after resize?
10,283
Use the resizeStop
event as follows:
$( "#dialog" ).dialog({
modal:true,
autoOpen: false,
show: "blind",
hide: "explode",
buttons: [{
text: "Ok",
click: function() { $(this).dialog("close"); }
}] ,
resizable: true,
width:'auto',
height:'auto',
resizeStop: function(event, ui) {
alert("Width: " + $(this).outerWidth() + ", height: " + $(this).outerHeight());
}
});
The content of the function specified in the resizeStop
option is triggered after the dialog has been resized.
Author by
Arnab
Professional Tester , Passionate developer and Hobbyist photographer.
Updated on June 11, 2022Comments
-
Arnab almost 2 years
I created a dialog successfully with resize enable but for my project I need the height and width of the open dialog after it is resized by a user.
I have created a button with id = opener and a div with id = dialog. Can someone please help me if possible.
Javascript:
// increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { $( "#dialog" ).dialog( { modal:true, autoOpen: false, show: "blind", hide: "explode", buttons: [ { text: "Ok", click: function() { $(this).dialog("close"); } }] , resizable: true, width:'auto', height:'auto' }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); });
HTML:
<body> <div class="demo"> <div id="dialog" title="Basic dialog"> <p>My content here. I want to show the height and width of my dialog after it is resized by a user </p> </div> <button id="opener">Open Dialog</button> </div> </body>