javascript - Detect when a DIV's height changes without polling or mutation observers -
i need height of div
, notified when height changes according data.
i using getboundingclientrect()
height currently, don't notified of further changes.
i tried domattrmodified
, mutationobserver
detect changes in data, both of them not universally supported in browsers.
what's best way notifications changes element's height?
the idea (that seems originate blog post on backalleycoder.com) can use
onresize
on element in ie <=10.scroll
events on specially crafted<div>
appended child of element in other browsers- or
onresize
on<object style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
appended child of element.
there's number of libraries implement or of these approaches:
- sdecima/javascript-detect-element-resize - uses
onresize
in ie +scroll
in other browsers. small (5kb unminified), not actively maintained atm. - wnr/element-resize-detector: uses same idea, more actively maintained, available npm package. has nicest readme, explaining caveats , explaining resize-on-
<object>
technique needed in older browsers. author wrote paper (modular responsive web design using element queries). library quite larger (16kb minified!) (probably because it's written in less ad-hoc way -- example has "batchprocessormaker" allow running number of functions @ later stage.) - http://marcj.github.io/css-element-queries/ provides
resizesensor
class appears use samescroll
technique (from popular question: how detect div's dimension changed?). rest of library has different purpose, though.
note older questions here on talk about:
attrchange
in jquery, domattrmodified, etc. - won't detecting height changes not involve changingheight
attribute- domsubtreemodified, mutationobserver - can used detect changes in content (which 1 of reasons can lead height changes -- other being layout changes, such change width)
- older solutions, including jquery plugins use polling accomplish -- that's not recommended solution, because page waste user's battery when nothing resized.
[edit] resizeobserver allow detect without hacks in newer browsers.
Comments
Post a Comment