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
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.