# javascript-detect-element-resize

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

Latest version **0.5.3** (published 2016-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install javascript-detect-element-resize
pnpm add javascript-detect-element-resize
yarn add javascript-detect-element-resize
bun add javascript-detect-element-resize
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2016-02-16 |
| First published | 2016-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 880 |
| Author | Sebastián Décima |
| Maintainers | jacobmartin |
| Keywords | resize, events |

## Links

- npm: https://www.npmjs.com/package/javascript-detect-element-resize
- Repository: https://github.com/sdecima/javascript-detect-element-resize
- Issues: https://github.com/sdecima/javascript-detect-element-resize/issues
- npm.io page: https://npm.io/package/javascript-detect-element-resize

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.5.3 (latest) — 2016-02-16

## README

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

---
_Source: https://npm.io/package/javascript-detect-element-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._