Event based jQuery element resize

The script does not use any kind of timer(s) to detect size changes. It uses the resize event on (invincible) iframe(s) which makes it perform much better than other solutions which use timers to poll element size. The script detects size changes made from JS, CSS, animations etc. and it works on any element able to contain other elements (e.g. div, p, li etc.).

Current version 1.0.1

jQuery plugin

How to use it

Download plugin archive and extract/upload mresize.min.js to your web server.

Include jQuery library (if your project doesn’t use it already) and mresize.min.js in the head tag or at the very bottom of your document, just before the closing body tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/path/to/mresize.min.js"></script>

Call jQuery mresize function on your element(s)

<div class="resizable"> ... </div>

<script>
    (function($){
        $(window).load(function(){
            $(".resizable").on("mresize",function(){
                console.log($(this));
            });
        });
    })(jQuery);
</script>

The plugin script has a default resize throttle of 100 milliseconds. To change its value you can modify the throttle property of "mresize" data object:

$(selector).data("mresize").throttle=100;

For example, to add the resize event and disable throttling you can do:

<script>
    (function($){
        $(window).load(function(){
            $(".resizable").on("mresize",function(){
                console.log($(this));
            }).each(function(){
                $(this).data("mresize").throttle=0;
            });
        });
    })(jQuery);
</script>

Video tutorial (from webucator.com)

Check more jQuery courses at webucator.com

Pure javascript tutorial

Append the resize event markup in your element

<div id="test">
  <!-- some content... -->
  <p>...</p>
  <!-- resize markup -->
  <div class="resize">
    <iframe></iframe><iframe></iframe>
  </div>
</div>

Add the resize event CSS

/* test element */
#test{
  position: relative;
  width: 60%;
  background: #ccc;
  resize: both;
  overflow: auto;
}
/* resize */
.resize{
  position :absolute;
  width :auto;
  height :auto;
  top :0;
  right :0;
  bottom :0;
  left :0;
  margin :0;
  padding :0;
  overflow :hidden;
  visibility :hidden;
  z-index :-1;
}
.resize iframe{
  width: 0;
  height: 100%;
  border: 0;
  visibility: visible;
  margin: 0;
}
.resize iframe:first-child{
  width: 100%;
  height: 0;
}

Include the resize script at the bottom of the document

<script>
  var t=document.getElementById("test"), p=t.children[0];
  Array.prototype.forEach.call(document.querySelectorAll(".resize iframe"),function(el){
    (el.contentWindow || el).onresize=function(){
      //do something...
      p.innerHTML=t.offsetWidth+"x"+t.offsetHeight;
    }
  });
</script>

Simple javascript class

var mresize=function(selector,callback){
    [].forEach.call( document.querySelectorAll(selector), function(el){
      el.mr=[el.offsetWidth,el.offsetHeight];
    el.insertAdjacentHTML("beforeend","<div class='mresize' style='position:absolute;width:auto;height:auto;top:0;right:0;bottom:0;left:0;margin:0;padding:0;overflow:hidden;visibility:hidden;z-index:-1'><iframe style='width:100%;height:0;border:0;visibility:visible;margin:0'></iframe><iframe style='width:0;height:100%;border:0;visibility:visible;margin:0'></iframe></div>");
    [].forEach.call( el.querySelectorAll(".mresize iframe"),function(frame){
      (frame.contentWindow || frame).onresize=function(){
        if(el.mr[0]!==el.offsetWidth || el.mr[1]!==el.offsetHeight){
          if(callback) callback.call(el);
          el.mr[0]=el.offsetWidth; el.mr[1]=el.offsetHeight;
        }
      }
    });
  });
}

Usage

<script>
  var resize=new mresize(selector,function(){
    //do something...
  });
</script>

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Donating helps greatly in developing and updating free software and running this blog 🙂