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?

Since apparently nobody knows the answer to this, I added another post in the jquery-layout forum. https://groups.google.com/forum/#!topic/jquery-ui-layout/NiZ-U3rIT4k — user3217883, Nov 17 '18 at 17:01

Maytha8 · Answer 1 · 2019-01-10T06:58:47.970

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>

This is a very nice answer and example but is there a way to get the width and height of the div without having to click and drag a corner? The chart should resize to fill available space as the splitter is resized. — user3217883, Nov 11 '18 at 04:14

score 0 · Answer 2 · answered Mar 01 '22 at 07:20

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>

How to get size of a panel during resize?

2 Answers2