Get Width and Height of flex box (like what w3schools has for there code examples)

[carrzkiss]

Hello, all.

I want to have something similar to what w3schools has on their code pages.
You can drag the bar in the middle, and it shows the width and height of the RIGHT panel.
I've tried all sorts of different projects and codes and cannot get that functionality to work from a RIGHT dragging panel.
And with this.
Flex - Two Panel (On JSFiddle)

I tried to use this, but it does not want to work.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="[email protected]" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script>
         $(function() {
            $("#Flex5").resizable({
               resize: function (event, ui) {
 // var width = $("#resizer").width() - ui.size.width;
 // var height = $("#resizer").height() - ui.size.height;
  var width = ui.size.width;
  var height = ui.size.height;
                  $("#Info").text ("width = " + width +", height = " + height);
               }
            });
         });
		 //Stop the calculation of the width and height when the div gets to its limit.
		 //Remove this, and the numbers will still count all the way to 10
  $(function() {
    $("#Flex5").resizable({
      minHeight: 200,
      minWidth: 320
    });
  });
      </script>

But it would not work correctly, and it would only work if the mouse came off from the resizer bar.
And the "jquery-ui.css" messes with the right Flex panel by adding a scrollbox within the panel itself.
Here is a screenshot of the w3schools panel showing the width and height.

Any assistance on this would be great.
Thank you
Wayne

[carrzkiss]

While looking in the js file, I found something, and I tried, and it worked.
However, it is getting the proper count I need from the RIGHT, but I need it to stop calculating once you reach the stop point.
Which is the width of 320px.

In the JS section in JSFiddle, you will see on line 44 (Flex - Two Panel (On JSFiddle))

		lastPos = pos;
    // To get LIVE update of the WIDTH of the Panel
		var width = $("body").width() - lastPos
		$("#Info").text (width);
		// Next we check to see if the value is less than 120px
    // And we do nothing. ELSE, we all the count to continue.
    // This is actually working on my test system, but is not working in
    // jsfiddle.
		if (nextSize < 120) {
    // This is for the LEFT side, and I am unsure what to place here??
    // Will depend on the size of the page itself.
    // This might need to be a hard coded number.
		}else{
			lastPos = pos;
		}

These lines give the live count of the width of the "lastPos."
The issue I have with using the lastPos is that if you drag to the RIGHT and then to the left, and back to the Right, it will slowly add on more numbers. As it is starting at its lastPos.
So, this is not going to work. But, was a good idea, just not for this.

[dubeyji10]

BASIC IDEA : every time mouse resizes the windows we need to call getBoundingClientRect();

you can check out the codepen i tinkered : HERE

[carrzkiss]

@dubeyji10
I would like to apologize for not responding.
I just now found your comment and viewed your wonderful code.
It seems to work much better than the one I currently use on our coding site.
I believe I will work on implementing your code by the end of the week.

Thank you, and once again, so sorry that I did not say thank you two years ago.
Take care, and continue doing wonderful things.