add-resize-listener

add-element-resize (fork of 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).

Fork

This fork packages it as a common.js module.

Install:

``sh
npm install --save add-resize-listener
`

Usage:

`js
const addResizeListener = require('add-resize-listener');

const unsub = addResizeListener(element, () => {
console.log(Resized);
});

unsub();

// alternative, uglier
const addResizeListener = require('add-resize-listener');
const { removeResizeListener } = addResizeListener;
const handler = () => {
console.log(Resized);
}
addResizeListener(element, handler);
removeResizeListener(element, handler);
``

Libraries
=========

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 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

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