This is an npm package for a javascript library to detect when an element on the page changes its size. This repo is a very thin wrapper over this excellent bit of code by Sebastián Décima, with some modifications.
This repository is just an npm package. If you're not using npm, please look at the original repo for installation notes.
To add this library to our npm project, we run the command:
npm install --save detect-element-resizeFirst, we make a file require()-ing the package:
your-code.js
var DetectElementResize = require('detect-element-resize');
var targetElement = document.getElementById('element-to-watch');
var resizeCallback = function () {
var elementResized = this;
console.log('element #' + elementResized.id + ' was resized!');
};
DetectElementResize.addResizeListener(targetElement, resizeCallback);
// resizeCallback will now be called whenever the dimensions of targetElement change
// ...
DetectElementResize.removeResizeListener(targetElement, resizeCallback);
// resizeCallback is no longer triggered
// more code ...Now we run the browserify command to generate the browser-ready bundle.js:
browserify -r your-code.js -o bundle.jsAnd we include it in our webpage:
index.html
<!-- ... -->
<script type="text/javascript" src="bundle.js"></script>
<!-- ... -->
<div id="element-to-watch"></div>
<!-- ... -->Watch the console output as you resize the element!
Contact me here.
If the license for a file in this repository is not clearly and specifically denoted within the file or another file in the same directory, it is licensed under the GNU GPL version 3 (or any later version) as specified in this repository.
Any code under the external/ subdirectory has its own README.md and LICENSE files, which are also listed below for convenience. Please make an issue if you believe this repository violates the licenses of any external code.