JavaScript/CSS: Detect when an element has been resized by the user

Question

Say one has a div which is vertically resizable like a textarea as below. When the user resizes the div, I would like to run a javascript function, resizeHandler below.

It seems like the resize event is only for the document/window. And resize observer fires for all events, like say when the document is loading, it will fire resize observer events. So then I set a timeout to apply the resize observer after the page load, but the resize observer seems to remember historic resizes, and fires the previous resizes events.

Is there a clean way to run resizeHandler() when the user resizes the div, and not for pageloading layout shifts?

function resizeHandler() {
   console.log('the div was resized')
}

div {
    resize: vertical;
    height: 64px;
    overflow-y: auto;
    background-color:gray;
}

<div id="DIV" style="max-height:180px">This is a resizable div</div>

Note: I can't remove the style attribute of the div which sets the max-height.

https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed Does this answer your question? — DreamBold, Dec 02 '22 at 16:25
There sure is. It's the resize observer: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver — Adam, Dec 02 '22 at 16:25
@DreamBold, no it doesnt, as mentioned in my question it explains what happens when I try resize oberver. — run_the_race, Dec 02 '22 at 16:27
@Adam, resizeObserver fires for page load resizes too, as explained in the question. — run_the_race, Dec 02 '22 at 16:28
When would it resize, when a user mouse-hold and drags or when the text-content changes? — Anuga, Dec 02 '22 at 16:30
There are some other answers you can try in the thread, like https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed#:~:text=ResizeSensor.js%20is%20part%20of%20a%20huge%20library%2C%20but%20I%20reduced%20its%20functionality%20to%20THIS%3A — DreamBold, Dec 02 '22 at 16:31
@Anuga, when you add `resize: vertical` to an element, it adds a little triangle bottom right of the element. If the user clicks and holds the little triangle, they can drag it to resize the element. — run_the_race, Dec 02 '22 at 16:35
use a resizeObserver and track mousedown state on the element? — Simon, Dec 02 '22 at 16:45

score 0 · Answer 1 · answered Dec 02 '22 at 17:02

The simplest way would be to add an eventlitener on the resizeable div. And then use an resizeObserver.

const resizeable_div = document.querySelector(".resizeable");


resizeable_div.addEventListener("mouseup", () => {
  function outputsize() {
    console.log("resized");
  }

  new ResizeObserver(outputsize).observe(resizeable_div);
});

mousedown or mouseup. But this will ignore pagereloads, what you've wanted and only triggers if the user do something with the div.

Hope this helps you.

score 0 · Answer 2 · answered Dec 02 '22 at 17:15

The main reason was I wish to remove the maxHeight style property so it can be manually resized:

    DIV.get('LIST').addEventListener('mousemove', this.mouseMoveHandle.bind(this));

    mouseMoveHandle(event) {
        DIV.resized = DIV.style.getPropertyValue('height') !== '' 
        if (DIV.resized) DIV.style.maxHeight = 'unset';
    }

JavaScript/CSS: Detect when an element has been resized by the user

2 Answers2