developit / simple-element-resize-detector Goto Github PK

View Code? Open in Web Editor NEW

189.0 8.0 7.0 12 KB

Observes element size changes using a hidden iframe

JavaScript 100.00%

observes-resizing element-resizes dom dom-mutation-observers dom-utilities

simple-element-resize-detector's Introduction

simple-element-resize-detector

Observes resizing of an element using a hidden iframe.

JSFiddle Demo

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 to observeResize() must have position: 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

simple-element-resize-detector's People

Contributors

Stargazers

Watchers

Forkers

nekr zanshinpost dokki charlieyqin iq-scm

simple-element-resize-detector's Issues

Resize detection only works in Chrome now

I understand that at this point, this project seems to be no longer maintained. But I just want to point out, the code seems only work in Chrome (8/2019), which makes it a bit pointless because Chrome natively supports ResizeObserver. Firefox 68 and Edge (the non-chromium one) currently doesn't support ResizeObserver and this workaround also doesn't work with the two browsers. Here is my code in case I used in incorrectly:

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Why it doesn't work</title>
</head>

<body>
  <div class='dummy'>This is the content that will be resized.</div>
  <style>
    .dummy {
      width: 100%;
      background: red;
      position: relative;
    }
  </style>
  <script>
    const CSS = `position:absolute;left:0;top:-100%;width:100%;height:100%;margin:1px 0 0;border:none;opacity:0;pointer-events:none;`;

    function observe(element, handler) {
      const frame = document.createElement('iframe');
      const supportsPE =
        document.documentMode < 11 && 'pointerEvents' in frame.style;

      frame.style.cssText = `${CSS}${supportsPE ? '' : 'visibility:hidden;'}`;
      frame.onload = () => {
        frame.contentWindow.onresize = () => {
          handler(element);
        };
      };
      element.appendChild(frame);
      return frame;
    };

    observe(document.querySelector('.dummy'), function () {
      console.log('dummy: resized!');
    });
  </script>
</body>

</html>

In the demo，the height of iframe is always 5px larger than textarea

Possible perf suggestion

I wrote one of these that used the same methodology many years ago and found that object elements with no navigation context were much lighter on memory than iframes. It has been so long I am not sure if this is still the case, so take this suggestion with a grain of salt.

TypeError frame.contentWindow == null in some browsers

Thanks for this wonderful technique! So glad I came by this.

We're using it in the Vimeo player to help with "element queries" however Sentry is reporting this error quite often. Still looking for a fix.

Don't work in firefox

It don't work in Firefox, the event is not fired when there is visibility:hidden. If you remove it it's fired.

Resize events only work if iframe in viewport

The solution of top:-100%; and margin:1px 0 0; does not keep the iframe positioned in a viewable area at all times. If the target element is nested in an element with overflow: hidden and the target element has a negative top margin or a negative absolute positioned top the resize events stop working.

top: 0; z-index: -1 seems to fix the issue but I'm not sure what all the consequences are.