javascript-detect-element-resize

A Cross-Browser, Event-based, Element Resize Detection.

In short, this implementation does NOT use an internal timer to detect size changes (as most implementations I found).

About the libraries

I was searching for a library that allowed me to detect when an DOM element changes size, and all solutions I found had two problems:

1. only available as jQuery libraries (so no standalone Javascript)
2. all had terrible performance (because all of them use timers to intermittently poll the size of the elements to detect a change).

Then I came across this great post on Back Alley Coder about using overflow and underflow events to do event-based element resize detection; and it works great without consuming resources at all (just like any other browser originated event).

The libraries on this repository are just a concrete implementation of that technique.

Libraries

Pure Javascript library usage

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>

jQuery plugin library usage

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.resize.js"></script>
<script type="text/javascript">
  $('#resizeElement').resize(function() {
    /* do something */
  });
</script>

Compatibility

Works great on:

• Chrome
• Firefox
• IE 10 and below

Doesn't work on:

• IE 11

TODO

• Create minified version of the libraries.
• Add support to IE11.
• Add support for standard jQuery bind method on 'resize' event.

Release Notes

v0.2

• Adds support for IE 8 and below.

v0.1

• Implementation based on the works of Back Alley Coder
• Adds jQuery plugin version

References

Similar libraries (but they use timers)

jQuery-mutate

jQuery-resize-plugin

Don't get me wrong, these are great libraries and work as advertised, it's just that they are not easy on browser resources.

External links

Back Alley Coder: Cross-Browser, Event-based, Element Resize Detection
Back Alley Coder: Overflow and Underflow Events