element-height-observer
Advanced tools
Allows you to add an efficient height listener to any dom element and execute a callback when its height changes
This library allows you to add an observer for page or element height. Each time the page changes height, a callback will be called.
No dependencies, total library minified is less than 0.9 KB
npm install element-height-observer --save
Load the script:
<html>
<head>
<script src="node_modules/element-height-observer/dist/index.js"></script>
</head>
</html>
Or import it:
var heightObserver = require('element-height-observer');
var registerHeightObserver = heightObserver.registerHeightObserver;
var unregisterHeightObserver = heightObserver.unregisterHeightObserver;
Or import it (ES6 modules notation):
import { registerHeightObserver, unregisterHeightObserver } from 'element-height-observer';
When the page has loaded, you can register the observer like this:
window.addEventListener('load', function () {
var someElement = document.querySelector('#someElementId');
registerHeightObserver(someElement, function () {
// Your code that you want to execute when the element changes height
})
});
You can only add one listener per element, otherwise the unregister mechanism won't work correctly.
var someElement = document.querySelector('#someElementId');
unregisterHeightObserver(someElement);
There are 2 functions available:
The options are optional and can currently only specify which dimension of the element it should watch for:
direction: 'horizontal' | 'vertical' | 'both'
The default is 'vertical'
The callback doesn't get passed any parameters:
callback: () => void
This library is inspired by a stackoverflow post by Jake
FAQs
Allows you to add an efficient height listener to any dom element and execute a callback when its height changes
We found that element-height-observer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.