kyleamathews/element-resize-event

Library to make it easy to listen for element resize events

element-resize-event

Library to make it easy to listen for element resize events

Code borrowed from a blog post by backalleycoder.com.

Install

npm install element-resize-event

Dependencies

This library depends on the availability of requestAnimationFrame and cancelAnimationFrame

Usage

var elementResizeEvent = require("element-resize-event")

var element = document.getElementById("resize")

elementResizeEvent(element, function () {
  console.log("resized!")
  console.log(element.offsetWidth)
})

Unbinding The Event Listener

var unbind = require("element-resize-event").unbind

unbind(element)

element-resize-event's Issues

this.contentDocument is null for safari mobile safari

I am having this error for safari/mobile safari

TypeError: null is not an object (evaluating 'this.contentDocument.defaultView')

I will keep debugging

TypeError: Cannot read property 'resize' of null"

echarts-for-react has depends on element-resize-event.

Users report bug of TypeError: Cannot read property 'resize' of null"(hustcc/echarts-for-react#43), maybe bug of element-resize-event.

Could someone explain to me how this package work?

I've read the source code, and I got some questions:

1. Any browser which implements attachEvent will support the resize event on any DOM element such as <div>?
2. According to question 1, other browsers do not support attachEvent so the resize event will not work, but how does the <object> element can?
3. Can we use <object> to detect resize in all browsers, even in IE 9 10?

__resizeListeners__ is undefined

Hi,
In versions 2.0.8 and 2.0.9 this line has been removed:
if(trigger !== undefined)
which caused undefined error.
There was specific reason for the removal or we can return them? currently it causes error in our console.

Cannot read property 'requestAnimationFrame' of undefined

Issue here: hustcc/echarts-for-react#148

because of babel 6 add use strict by default. add plugin transform-remove-strict-mode will be ok.

Also rewrite it with es6 here.

element-resize-event pollutes nodejs environment with "document" and "window" objects

window and document are declared without the var keyword:

https://github.com/KyleAMathews/element-resize-event/blob/master/index.js#L2

This has an equivalent effect to this line:

global.window = {}

It's a best practice for npm packages to not pollute the global namespace. In particular, plenty of other modules use a rough check on window to tell if it's a nodejs environment or not, and this line invalidates the check.

Would you mind updating the package with this fix?

I just want to Say a big thanks for your package, you save me.

Border around Element with attached resize handler in Internet Explorer

When using this Module in Internet Explorer there is a ugly Border around the resize element.
This can be seen on the example page: When looking closer, an extra inner Border in the resizeable Element can be seen.

resize event doesn't get triggered on Chrome

I'm using this package in Angular 7 in OnInit method which seems to be working ok in Firefox but not in Chrome Version 80.0.3987.106 (Official Build) (64-bit). Technically it shouldn't be working in Firefox as I don't resize the element on page load.

how to use `unbind` ?

use in es6

import elementResizeEvent, {unbind} from 'element-resize-event'

but the unbind is undefined

error when using Vite with @antv/l7

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I'm using Vite with @antv/l7 which has your project as one of the dependcies.

Since Vite prebundled all modules with esbuild when developing, it tells me that

Maybe the function name exports is confused with module.exports here.

Here is the diff that solved my problem:

diff --git a/node_modules/element-resize-event/index.js b/node_modules/element-resize-event/index.js
index fb1e2a3..d26e41a 100644
--- a/node_modules/element-resize-event/index.js
+++ b/node_modules/element-resize-event/index.js
@@ -14,7 +14,7 @@ function resizeListener(e) {
   })
 }
 
-var exports = function exports(element, fn) {
+var _exports = function _exports(element, fn) {
   var window = this
   var document = window.document
   var isIE
@@ -64,7 +64,7 @@ var exports = function exports(element, fn) {
   element.__resizeListeners__.push(fn)
 }
 
-module.exports = typeof window === 'undefined' ? exports : exports.bind(window)
+module.exports = typeof window === 'undefined' ? _exports : _exports.bind(window)
 
 module.exports.unbind = function (element, fn) {
   var attachEvent = document.attachEvent

This issue body was partially generated by patch-package.

Use parentNode to listen, not the element itself

Perhaps this is an edge case that I am seeing, but if the element has a defined height and width, the object DOM node will not detect a difference, and consequently will not trigger an event.

Here is what my DOM node looks like:

<div class="ReactTabs__TabPanel ReactTabs__TabPanel--selected" role="tabpanel" id="react-tabs-51" aria-labelledby="react-tabs-50" style="position: relative; height: 212px;">
    <div style="background: red; width: 100%; height: 100%;"></div>
    <object style="display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;" class="resize-sensor" type="text/html" data="about:blank"></object>
</div>

In this example, you can see that the root element has a height of 212px. When the parent div (not shown in this example) is dragged and resized, because the 'panel' div already has a height associated with it, it will not trigger an event.

I'd like to propose a solution: attach the object DOM node into the parentNode of the element:

// https://github.com/KyleAMathews/element-resize-event/blob/master/index.js#L73
    element.parentNode.appendChild(obj)  // line 78 & line 73

Here is what the DOM would look like after the change:

Here is a screenshot with current implementation:

It appears like this repo is dead ...

But there's a critical bug that doesn't allow it to run in a modern build setup. So i forked it and added all the PR's waiting for approval.

https://github.com/drcmda/dom-resize

Add tests

window undefined

I rely on the echarts-for-react the package depends on your bag, but because your bag in the update cause in error in my code, trouble update before test.

Event doesn't fire in MS Edge

Unbind event?

It appears there is no way to remove event handlers. Is this correct?

version 2.0.8 throws when requiring in node.

version 2.0.7 gracefully handles there not being a window when requiring in node.
The latest update throws (see error below).

$ node -r element-resize-event
/node_modules/element-resize-event/index.js:4
    window.webkitRequestAnimationFrame ||
                                       ^

ReferenceError: window is not defined
    at /node_modules/element-resize-event/index.js:4:40
    at Object.<anonymous> (/node_modules/element-resize-event/index.js:11:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at module.js:660:12
    at Array.forEach (native)