Vfrdtyky

I have a multi-panel jQuery layout and want to know the size of the inner-center panel while it is resizing. document.ready function looks like this:

$(document).ready(function () { 



    outerLayout = $('body').layout({ 

        spacing_open:           8

    ,   south__spacing_open:    4 

    ,   north__minSize:         40

    ,   north__maxSize:         200

    ,   center__onresize:       resizeInnerLayout

    ,   resizeWhileDragging:    true

    ,   triggerEventsWhileDragging: true

    }); 

Here is the resizeInnerLayout function:

function resizeInnerLayout() {

    var width=$('#content-middle').width();

    var height = $('#content-middle').height();

    console.log("content-middle size = ("+width +"," +height +")");

};

Here is the html:

<div id="content-middle" class="inner-center">

    <svg></svg>

</div> 

Javascript puts a d3 chart inside the svg. I need to know the size of the div as it resizes when the user slides the divider bar so I can resize the chart accordingly. Currently, the console.log outputs nothing.

I have also tried binding a function to the layoutpaneresize event like this:

$('.inner-center').bind('layoutpaneresize', function(paneName, $pane, paneState, paneOptions) {

        console.log("content-middle size = ("+paneState.width +"," +paneState.height +")");     

    });

But it also outputs nothing. Neither did this:

$('.inner_center').resize(function() {

    console.log("content-middle is being resized");

});

This one works, but only if the browser window is resized, not if the splitter inside the window is resized. Even then, it reports the size as you begin to resize but doesn't update as the size continues to change.

window.addEventListener("resize", drawChart);

Any ideas?

You should use jQuery UI's .resizable() interaction.

Syntax

$(element).resizeable({

    handles: 'n|s|e|w|nw|ne|sw|se',

    minWidth: Int,

    minHeight: Int,

    maxWidth: Int,

    maxHeight: Int,

    resize: function(event, ui) {

        // Statements

    }

});

Example

$("div").resizable({

  handles: 'e, se, s',

  minWidth: 50,

  minHeight: 50,

  maxWidth: 200,

  maxHeight: 200,

  resize: function(event, ui) {

    $("pre").text(ui.size.width + 'x' + ui.size.height);

  }

});

.ui-resizable-e, .ui-resizable-s {

  background-color: black;

}

div {

  width:100px;

  height:100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<div>Resize Me</div>

<br>

Result

<pre></pre>