How to get size of a panel during resize?

Question

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?

Answer 1

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#1").resizable({
  handles: 'e',
  minWidth: 0,
  minHeight: $("body").height(),
  maxWidth: $("body").width(),
  maxHeight: $("body").height(),
  resize: function(event, ui) {
  var left = Math.round(((ui.size.width / $("body").width()) * 100));
  var right = Math.round((100 - ((ui.size.width / $("body").width()) * 100)));
  $("div#2").width(right);
    $("pre").text("Left: " + left + " & Right: " + right);
  }
});

.ui-resizable-e {
  background-color: black;
}
.ui-resizable-e:hover {
  cursor: grab;
}
body {
  margin: 0;
}
div {
  width:50vw;
  height:100vh;
  display: inline-block;
}
div#1 {
  background-image: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?cs=srgb&dl=beach-blur-boardwalk-132037.jpg&fm=jpg");
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<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 id="1">
Resize Me
<br>
Result
<pre>Left: 50 & Right: 50</pre>
</div>
<div id="2"></div>

Answer 2

I took the below code from Maytha8 and his post above.
Except mine shows the width and height instead of left and right.
I hope this helps others out.
Thanks, Maytha8

Wayne

$("div#1").resizable({
  handles: 'e',
  minWidth: 0,
  minHeight: $("body").height(),
  maxWidth: $("body").width(),
  maxHeight: $("body").height(),
  resize: function(event, ui) {
  var left = Math.round(((ui.size.width / $("body").width()) * 100));
  var right = Math.round((100 - ((ui.size.width / $("body").width()) * 100)));
  var width = ui.size.width; // Add for width
  var height = ui.size.height; // added for height
  $("div#2").width(right);
    $("pre").text("Width: " + width + " & Height: " + height);
  }
});
$(element).resizeable({
    handles: 'n|s|e|w|nw|ne|sw|se',
    minWidth: Int,
    minHeight: Int,
    maxWidth: Int,
    maxHeight: Int,
    resize: function(event, ui) {
        // Statements
    }
});

.ui-resizable-e {
  background-color: black;
}
.ui-resizable-e:hover {
  cursor: grab;
}
body {
  margin: 0;
}
div {
  width:5px;
  height:100px;
  display: inline-block;
}
div#1 {
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#frame{
    width:700px;
    height:500px;
}

<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 id="frame">
<div id="1">
Resize Me
<br>
Result
<pre>Width and Height information here</pre>
</div>
<div id="2"></div>
</div>