All geek questions in one place

How to get the height and width of the dialog after resizing?

I created the dialog successfully with resize permission, but for my project I need the height and width of the open dialog box after the user changes it.

I created a button with id = openener 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>
+4
source share
1 answer

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 contents of the function specified in the resizeStop option resizeStop launched after the dialog is resized.

+6
source

Source: https://habr.com/ru/post/1397217/

More articles:


All Articles