onElementResize 0.1

by moob

HTML

<div id="testdiv" class="resizable">This div is resizable and grows on hover. Check the console.</div>

CSS

body { padding: 50px; font-family: sans-serif; }

#testdiv { 
    padding: 20px;
    background-color: #dddddd;
    transition: all 0.5s ease;
}

#testdiv:hover { 
    padding:50px 20px;
}


.resizable {
    resize: both;   /* Options: horizontal, vertical, both */
    overflow: auto;
}

JavaScript

//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
              window.setTimeout(callback, 1000 / 60);
          };
})();


//iife
(function onElementResize(elid){ 
    var el = document.getElementById(elid),
        width = el.offsetWidth,
        height = el.offsetHeight;
    //set up a loop
    (function loop(){
        check();
        requestAnimFrame(loop);
    })();
    //check for size change
    function check(){
        var currentWidth = el.offsetWidth,
            currentHeight = el.offsetHeight;
            if(currentWidth!==width || currentHeight!==height){
                sizeChanged();
            }
        width = currentWidth;
        height = currentHeight;
    };
    //onresize
    function sizeChanged(){
        console.log("size: "+width+" x "+height+"");
    }
})("testdiv");