Javascript Custom Resize Event

Question

I have a very simple question, or at least it seems that way.

I have a DIV element which will be resized at one moment. I want to be able to capture the resizing moment.

Something like this:

function myFunction(){
 alert('The DIV was resized');
}

divElement.addEventListener("resize", myFunction, false);

Does anyone know the answer?

Thanks

Have a look at [Javascript event for canvas resize](http://stackoverflow.com/questions/5825447/javascript-event-for-canvas-resize). — Felix Kling, Apr 11 '12 at 16:36

score 3 · Answer 1 · edited May 23 '17 at 12:14

As of December 2011, there's no built-in event to detect when a div resizes, just when a window resizes.

Check out this related question: Detecting when a div's height changes using jQuery, and this plugin from the solution to that question: http://benalman.com/projects/jquery-resize-plugin/

With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

Why is a plugin needed for the resize event?

Long ago, the powers-that-be decided that the resize event would only fire on the browser’s window object. Unfortunately, that means that if you want to know when another element has resized, you need to manually test its width and height, periodically, for changes. While this plugin doesn’t do anything fancy internally to obviate that approach, the interface it provides for binding the event is exactly the same as what’s already there for window.

For all elements, an internal polling loop is started which periodically checks for element size changes and triggers the event when appropriate. The polling loop runs only once the event is actually bound somewhere, and is stopped when all resize events are unbound.

Sample Code

// You know this one already, right?
$(window).resize(function(e){
  // do something when the window resizes
});

// Well, try this on for size!
$("#unicorns").resize(function(e){
  // do something when #unicorns element resizes
});

// And of course, you can still use .bind with namespaces!
$("span.rainbows").bind( "resize.rainbows", function(e){
  // do something when any span.rainbows element resizes
});

OP did not mention jQuery (wouldn't it be a duplicate of the question you linked to anyway?). Do you have a non-jQuery solution as well? — Felix Kling, Apr 11 '12 at 16:38
There is and there was always a method to determine for size changes without the inefficient `setTimeout` approach. Please check my answer to get more information. — Marc J. Schmidt, Oct 17 '13 at 03:58

Ishan Jain · Answer 2 · 2013-10-17T04:29:15.917

You can try this plugin - http://benalman.com/code/projects/jquery-resize/examples/resize/

There are various examples. Try resizing your window and see how elements inside container elements adjusted.

Example with js fiddle

In that resize() event is bound to an elements having class "test" and also to the window object and in resize callback of window object $('.test').resize() is called.

e.g.

$('#test_div').bind('resize', function(){
     console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

See this

Alexander Bird · Answer 3 · 2012-04-12T19:34:28.423

My first thought is to use a custom event system. You can find a pure javascript one here ( http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/ )

After including his code, you can do something like this:

function myFunction(){
 alert('The DIV was resized');
}

div_elm = document.getElmentById('div-to-resize');
EventTarget.call(div_elm);
div_elm.addListener("resize", myFunction);

Then later, just add one line to wherever you are resizing the div.

div_elm.width += 100 //or however you are resizing your div
div_elm.fire("resize");

I think that should work for you.

EDIT:

If you are not the one coding the resizing, then my first thought is something like this:

var resizeScannerInterval_id = (function(div) {
    var width = div.offsetWidth;
    var height = div.offsetHeight;

    var interval_id = setInterval(function() {
        if( div.offsetWidth != width || div.offsetHeight != height )
            width = div.offsetWidth;
            height = div.offsetHeight;
            div.fire();
        }
    },250);

})(document.getElementById('div-id'))

What if you're not the one causing the resize? – Ruan Mendes Apr 11 '12 at 16:57 — Ruan Mendes, Apr 11 '12 at 16:57

score 0 · Answer 4 · answered Oct 17 '13 at 03:56

There is a very efficient method to determine if a element's size has been changed.

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection. It uses a event-based approach, so it's damn fast and doesn't waste CPU time.

Please do not use the jQuery onresize plugin as it uses setTimeout() loop to check for changes. THIS IS INCREDIBLY SLOW AND NOT ACCURATE.

Javascript Custom Resize Event

4 Answers4