Menu
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>
228
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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
