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 do).
It uses `scroll` events on most browsers, and the [`onresize` event][5] on IE10 and below.

The method used not only detects javascript generated resize changes but also changes made from CSS pseudo classes e.g. :hover, CSS animations, etc.

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][1] on [Back Alley Coder][3] about using ~~[overflow and underflow events][2]~~ [`scroll` events][2] 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 ready-to-use implementation of the above, one pure javascript and the other a jQuery plugin version (just for convenience).

Libraries
=========

Pure Javascript library usage
-----------------------------

```html
<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
---------------------------
```html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.resize.js"></script>
<script type="text/javascript">
  var myFunc = function() {
    /* do something */
  };
  
  $('#resizeElement').resize(myFunc);
  $('#resizeElement').removeResize(myFunc);
</script>
```

Compatibility
-------------
Works great on:

 - Chrome
 - Firefox
 - IE 11 and below (tested on 11, 10, 9, 8 and 7)

Known Issues:

 - On IE 10 and below: If you detach the element and re-attach it, you will need to add the resize listener again.

Doesn't work on:

 - ???

Please [let me know](https://github.com/sdecima/javascript-detect-element-resize/issues) if you test these libraries on any other browser, of if you run into issues with any of the above browsers.

TODO
====

 - Fix detach/re-attach issue on IE 10 and below (IE 9 and below doesn't support CSS animations so we can use those as in the rest of the browsers).
 - Create minified version of the libraries.
 - Add support for standard jQuery bind method on 'resize' event.

Release Notes
=============
v0.5.3
------

 - Fix for when the element is inside a display:none, and for when it is detached and reattached (changed @thomassuckow and @jerjou fixes to properly use CSS animations)
 - Adding /tests/ with some general QUnit tests to help test on multiple browsers

v0.5.2
------

 - Adding a bower.json file (thanks @adamjcook)
 - Fix style being appended to head multiple times (thanks @thomassuckow and @progman32)
 - Work around a chrome bug that would show scrollbars in some cases (thanks @thomassuckow)

v0.5.1
------

 - Fix for resize event on IE

v0.5
----

 - It is now fully compatible with IE11.
 - Rework of the libraries using the new scroll-event-based code of [Back Alley Coder][1]. For the pure javascript version I pretty much used the original code from [Back Alley Coder][1] and only had to add code to dynamically insert the styling for the resize-triggers.

v0.4.1
----

 - Fix for jQuery 'resize' method overlapping.

v0.4
----

 - Adds better cross-browser support, it now uses MutationObservers only on IE11.

v0.3
----

 - Adds support for MutationObservers.
 - Adds support for IE 11.
 - Wrapped the pure javascript version of the library (to hide non-public methods).

v0.2
----

 - Adds support for IE 8 and below.

v0.1
----

 - Implementation based on the [works][1] of [Back Alley Coder][3].
 - Adds jQuery plugin version.


References
==========

Similar libraries (but they use timers)
---------------------------------------
[jQuery-mutate](http://www.jqui.net/jquery-projects/jquery-mutate-official/)

[jQuery-resize-plugin](http://benalman.com/projects/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][1]  
[Back Alley Coder: Overflow and Underflow Events][2]

[1]: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
[2]: http://www.backalleycoder.com/2013/03/14/oft-overlooked-overflow-and-underflow-events/
[3]: http://www.backalleycoder.com/
[4]: http://www.w3.org/TR/dom/#mutation-observers
[5]: http://msdn.microsoft.com/en-us/library/ie/ms536959