{"_id":"javascript-detect-element-resize","_rev":"3-a2eca41d32783baa0fdcac0fe07b421c","name":"javascript-detect-element-resize","description":"A Cross-Browser, Event-based, Element Resize Detection","dist-tags":{"latest":"0.5.3"},"versions":{"0.5.3":{"name":"javascript-detect-element-resize","version":"0.5.3","description":"A Cross-Browser, Event-based, Element Resize Detection","main":"detect-element-resize.js","directories":{"test":"tests"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/sdecima/javascript-detect-element-resize.git"},"keywords":["resize","events"],"author":{"name":"Sebastián Décima","url":"https://github.com/sdecima/"},"license":"MIT","bugs":{"url":"https://github.com/sdecima/javascript-detect-element-resize/issues"},"homepage":"https://github.com/sdecima/javascript-detect-element-resize","devDependencies":{"browserify":"^6.3.3"},"_id":"javascript-detect-element-resize@0.5.3","_shasum":"1a71cd51dfe565907f299012fe73a294104025de","_from":".","_npmVersion":"3.3.12","_nodeVersion":"4.2.3","_npmUser":{"name":"jacobmartin","email":"media636@gmail.com"},"dist":{"shasum":"1a71cd51dfe565907f299012fe73a294104025de","tarball":"https://registry.npmjs.org/javascript-detect-element-resize/-/javascript-detect-element-resize-0.5.3.tgz","integrity":"sha512-XbToz3yieLy8d3JRq2JXv+p7iWWBNSKU+7MvUB2toYc3Fv6Um8OJLNKySTa95AnfMrv5xynzDFq/N1PrXyibFg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGBaCc/AFxw+90psonI9Dm5k2jw685SIciktJvzuajBAiEA2mUEH4H6lNJ+09EcJ9EbbIhvGim3gd+gvSKY6RLSof0="}]},"maintainers":[{"name":"jacobmartin","email":"media636@gmail.com"}],"_npmOperationalInternal":{"host":"packages-9-west.internal.npmjs.com","tmp":"tmp/javascript-detect-element-resize-0.5.3.tgz_1455656065050_0.2576506729237735"}}},"readme":"javascript-detect-element-resize\n================================\n\nA Cross-Browser, Event-based, Element Resize Detection.\n\nIn short, this implementation does NOT use an internal timer to detect size changes (as most implementations I found do).\nIt uses `scroll` events on most browsers, and the [`onresize` event][5] on IE10 and below.\n\nThe method used not only detects javascript generated resize changes but also changes made from CSS pseudo classes e.g. :hover, CSS animations, etc.\n\nAbout the libraries\n===================\nI was searching for a library that allowed me to detect when an DOM element changes size, and all solutions I found had two problems:\n\n 1. only available as jQuery libraries (so no standalone Javascript)\n 2. all had terrible performance (because all of them use timers to intermittently poll the size of the elements to detect a change).\n\nThen 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).\n\nThe 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).\n\nLibraries\n=========\n\nPure Javascript library usage\n-----------------------------\n\n```html\n<script type=\"text/javascript\" src=\"detect-element-resize.js\"></script>\n<script type=\"text/javascript\">\n  var resizeElement = document.getElementById('resizeElement'),\n      resizeCallback = function() {\n          /* do something */\n      };\n  addResizeListener(resizeElement, resizeCallback);\n  removeResizeListener(resizeElement, resizeCallback);\n</script>\n```\n\njQuery plugin library usage\n---------------------------\n```html\n<script type=\"text/javascript\" src=\"jquery.js\"></script>\n<script type=\"text/javascript\" src=\"jquery.resize.js\"></script>\n<script type=\"text/javascript\">\n  var myFunc = function() {\n    /* do something */\n  };\n  \n  $('#resizeElement').resize(myFunc);\n  $('#resizeElement').removeResize(myFunc);\n</script>\n```\n\nCompatibility\n-------------\nWorks great on:\n\n - Chrome\n - Firefox\n - IE 11 and below (tested on 11, 10, 9, 8 and 7)\n\nKnown Issues:\n\n - On IE 10 and below: If you detach the element and re-attach it, you will need to add the resize listener again.\n\nDoesn't work on:\n\n - ???\n\nPlease [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.\n\nTODO\n====\n\n - 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).\n - Create minified version of the libraries.\n - Add support for standard jQuery bind method on 'resize' event.\n\nRelease Notes\n=============\nv0.5.3\n------\n\n - 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)\n - Adding /tests/ with some general QUnit tests to help test on multiple browsers\n\nv0.5.2\n------\n\n - Adding a bower.json file (thanks @adamjcook)\n - Fix style being appended to head multiple times (thanks @thomassuckow and @progman32)\n - Work around a chrome bug that would show scrollbars in some cases (thanks @thomassuckow)\n\nv0.5.1\n------\n\n - Fix for resize event on IE\n\nv0.5\n----\n\n - It is now fully compatible with IE11.\n - 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.\n\nv0.4.1\n----\n\n - Fix for jQuery 'resize' method overlapping.\n\nv0.4\n----\n\n - Adds better cross-browser support, it now uses MutationObservers only on IE11.\n\nv0.3\n----\n\n - Adds support for MutationObservers.\n - Adds support for IE 11.\n - Wrapped the pure javascript version of the library (to hide non-public methods).\n\nv0.2\n----\n\n - Adds support for IE 8 and below.\n\nv0.1\n----\n\n - Implementation based on the [works][1] of [Back Alley Coder][3].\n - Adds jQuery plugin version.\n\n\nReferences\n==========\n\nSimilar libraries (but they use timers)\n---------------------------------------\n[jQuery-mutate](http://www.jqui.net/jquery-projects/jquery-mutate-official/)\n\n[jQuery-resize-plugin](http://benalman.com/projects/jquery-resize-plugin/)\n\n\nDon't get me wrong, these are great libraries and work as advertised, it's just that they are not easy on browser resources.\n\nExternal links\n--------------\n[Back Alley Coder: Cross-Browser, Event-based, Element Resize Detection][1]  \n[Back Alley Coder: Overflow and Underflow Events][2]\n\n[1]: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/\n[2]: http://www.backalleycoder.com/2013/03/14/oft-overlooked-overflow-and-underflow-events/\n[3]: http://www.backalleycoder.com/\n[4]: http://www.w3.org/TR/dom/#mutation-observers\n[5]: http://msdn.microsoft.com/en-us/library/ie/ms536959\n\n","maintainers":[{"name":"jacobmartin","email":"media636@gmail.com"}],"time":{"modified":"2022-06-19T03:52:18.083Z","created":"2016-02-16T20:54:28.625Z","0.5.3":"2016-02-16T20:54:28.625Z"},"homepage":"https://github.com/sdecima/javascript-detect-element-resize","keywords":["resize","events"],"repository":{"type":"git","url":"git+https://github.com/sdecima/javascript-detect-element-resize.git"},"author":{"name":"Sebastián Décima","url":"https://github.com/sdecima/"},"bugs":{"url":"https://github.com/sdecima/javascript-detect-element-resize/issues"},"license":"MIT","readmeFilename":"README.md"}