define div size according to svg in js

Question

Good afternoon. Sorry, I was wondering if you could use the onresize javascript event to resize a div/container.

I’m using that code:

var resizeTimer;
        window.onresize = function (event) {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                var s = d3.selectAll('g');
                s = s.remove();
                set_vars();
                drawGraphic();
            }, 100);
        }

but it only resizes content if I increase/decrease the browser window.

From now on, thank you!

Answer 1

Thank you for the clarification. In my case, it was necessary to use an external script, as it was necessary to resize the father div and the daughters div’s and their respective contents. For this I used the script "javascript-Detect-element-resize".

link: https://github.com/sdecima/javascript-detect-element-resize

Answer 2

I understand you want to resize a div.

So to make a div resizeable you must use the property resize of the CSS.

Example of use:

div{
  border: 1px solid;
  height: 100px;
  resize: both;
  overflow:auto;
}

<div>Teste</div>

The event onresize will not resize your div, it will only call a function (created by you) when the user resizes the div.

So you can use this event only to add another behavior to the div once the user starts resizing it.

Documentation MDM Web Docs

Answer 3

The onresize event is the browser event that is startado when Voce increases and decreases so it only works in these two cases, you need to identify when Voce wants to resize your div , if it is to decrease and even increase would be this way with Jquery

 window.onresize = $('#id-div').attr('style', `height:
 ${window.screen.height}`)