1

I am trying to figure out a way to detect when a div element is resized and resize several other associated elements in the same class as it. I learned that the onresizeevent only works on the body but not individual elements.

I did discover ResizeObserver and there was this example ->How to detect DIV's dimension changed?

<html>
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>
</html>
<script>
function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
</script>

As you can see the observer is passed the object by name and a call back, but I am trying to figure out way to pass the call back an element. The example above the specific the element name (textbox) is in the function, but I'd like to pass it as an input variable. something like...

new ResizeObserver(outputsize(self)).observe(self)

I feel like this should be easy but I am missing it.

jeffpkamp
  • 2,732
  • 2
  • 27
  • 51

2 Answers2

0

looking at the documentation page, I found an answer.

I define the interaction with elements when I define the resize observer. 

var ro=new ResizeObserver( entrie => {
        for (let entry of entrie){
                outputsize(entry.target);
        }
});

then I can set an observer using this for each element I want watched.

ro.observe(textbox);
ro.observe(t2);

So it all working together looks like this (this program resizes the bottom window to match how the top on is being resize).

<html>
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
ID:<output id="id"></output><br>
ID2:<output id="id2"></output><br>
<textarea id="textbox" class='tim'>Resize me</textarea><br>
w:<output id="w2">0</output><br>
h:<output id="h2">0</output><br>
<textarea id="t2" class='tom'>I'm #2</textarea><br>
<textarea id="t3" class='tom tim'>I'm gonna change</textarea><br>
</html>
<script>

function outputsize(ele) {
        //console.log(ele);
        id2.value=textbox;
        width.value = ele.offsetWidth;
        height.value = ele.offsetHeight;
        var cl=document.getElementsByClassName(ele.classList[0]);
        console.log(cl);
        console.log(ele.classList);
        for (x=0;x<cl.length;x++){
                cl[x].style.width=ele.offsetWidth;
                console.log(ele.id+" "+ele.offsetWidth);
                console.log(cl[x].id+" "+cl[x].offsetWidth);
        }
}

var ro=new ResizeObserver( entrie => {
        for (let entry of entrie){
                outputsize(entry.target);
        }
});

ro.observe(textbox);
ro.observe(t2);
</script>
jeffpkamp
  • 2,732
  • 2
  • 27
  • 51
  • 1
    oh, sorry my answer didn't work, i removed it since it's not very useful, but i'm glad you figured it out and i appreciate you putting an answer to this. – Taki Mar 07 '18 at 17:13
0

Your question just came up while I was searching for a solution for the same problem.

Here's what I ended up doing.

You can't do this

const element = document.querySelector(".foo");
new ResizeObserver(outputsize(element)).observe(element)

instead, you should do this 

const element = document.querySelector(".foo");
new ResizeObserver(() => {
  outputsize(element);
}).observe(element);
volt
  • 963
  • 8
  • 17