How to call a function on div resize?

Question

There is a new CSS property, called resize, so the divs are resizeable too. But how to attach an event listener? Because .onresize works only on the window object

JSFiddle: http://jsfiddle.net/3y0gfj8j/

Edit:

I don't want to use JQuery. It's not a duplicate question. I've found only JQuery solutions for this problem, that's why I asked this question.

Duplicate: http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events — Andreas Furster, Sep 30 '14 at 08:51
look at this: http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events — TheGr8_Nik, Sep 30 '14 at 08:54
possible duplicate of [How to detect DIV's dimension changed?](http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed) — , Sep 30 '14 at 08:59
I've found only JQuery solutions for this problem, that's why I asked this question. Stop posting possible duplicates please — Iter Ator, Sep 30 '14 at 09:02
mutation observer? https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver — Daniel Lizik, Jun 02 '16 at 19:37

score 2 · Answer 1 · answered Nov 14 '18 at 23:54

I worked around it this way. Seems to work OK in Firefox at least. It fires when you take your cursor off the resize 'grabber' on the bottom right of the element you're resizing.

<DOCTYPE=html>
<html>

<script>
function functionname()
{
//replace this line with the script you want executed
}
</script>

<style>
#idname {resize:both;}
</style>

<body>
<div id="idname" onmouseout="functionname();"></div>
</body>

</html>

How to call a function on div resize?

1 Answers1