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).
scroll events on most browsers, and the
onresize event on IE10 and below.
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:
- 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
scroll events to do event-based element resize detection; and it works great without consuming resources at all (just like any other browser originated event).
jQuery plugin library usage
Works great on:
- IE 11 and below (tested on 11, 10, 9, 8 and 7)
- 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.
- 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.
- 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
- 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)
- Fix for resize event on IE
- It is now fully compatible with IE11.
- Fix for jQuery 'resize' method overlapping.
- Adds better cross-browser support, it now uses MutationObservers only on IE11.
- Adds support for MutationObservers.
- Adds support for IE 11.
- Adds support for IE 8 and below.
Similar libraries (but they use timers)
Don't get me wrong, these are great libraries and work as advertised, it's just that they are not easy on browser resources.