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.

Share:
10,283
Arnab
Author by

Arnab

Professional Tester , Passionate developer and Hobbyist photographer.

Updated on June 11, 2022

Comments

  • Arnab
    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>