developit / Simple Element Resize Detector
Observes element size changes using a hidden iframe
Stars: ✭ 187
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Simple Element Resize Detector
Nativejsx
JSX to native DOM API transpilation. 💛 <div> ⟹ document.createElement('div')!
Stars: ✭ 145 (-22.46%)
Mutual labels: dom
Jquery Xpath
jQuery XPath plugin (with full XPath 2.0 language support)
Stars: ✭ 173 (-7.49%)
Mutual labels: dom
Online Privacy Test Resource List
Privacy Online Test and Resource Compendium (POTARC) 🕵🏻
Stars: ✭ 185 (-1.07%)
Mutual labels: dom
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+1139.04%)
Mutual labels: dom
Svgdom
Straightforward DOM implementation to make SVG.js run headless on Node.js
Stars: ✭ 154 (-17.65%)
Mutual labels: dom
Phpstamp
The XSL-way templating library for MS Office Word DOCX documents.
Stars: ✭ 150 (-19.79%)
Mutual labels: dom
Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (-3.21%)
Mutual labels: dom
Nemetric
前端性能指标的监控,采集以及上报。用于测量第一个dom生成的时间(FP/FCP/LCP)、用户最早可操作时间(fid|tti)和组件的生命周期性能,,网络状况以及资源大小等等。向监控后台报告实际用户测量值。
Stars: ✭ 145 (-22.46%)
Mutual labels: dom
Object Visualizer
Vue JSON inspector with Chrome-like theme.
Stars: ✭ 159 (-14.97%)
Mutual labels: dom
Long Press Event
Adds `long-press` event to the DOM in 1k of pure JavaScript
Stars: ✭ 187 (+0%)
Mutual labels: dom
Domxssscanner
DOMXSS Scanner is an online tool to scan source code for DOM based XSS vulnerabilities
Stars: ✭ 181 (-3.21%)
Mutual labels: dom
Preact Markup
⚡️ Render HTML5 as VDOM, with Components as Custom Elements!
Stars: ✭ 167 (-10.7%)
Mutual labels: dom
simple-element-resize-detector
Observes resizing of an element using a hidden iframe.
Installation
npm i -S simple-element-resize-detector
Usage
import observeResize from 'simple-element-resize-detector';
// any DOM element that can have children
let element = document.createElement('div');
// listen for resize
observeResize(element, () => {
console.log('new size: ', {
width: element.clientWidth,
height: element.clientHeight
});
});
To stop observing resize events, simply remove the returned detector frame:
let detector = observeResize(el, () => {});
detector.remove();
// or, for better browser compatibility:
// detector.parentNode.removeChild(detector)
Notes
-
element
passed toobserveResize()
must haveposition: relative
style to be correctly observed, otherwise nearest relative ancestor will be observed instead. - This library uses
<iframe>
s to detect when an element resizes.<iframe>
s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].