EventX-ResizeObserver-event
- Allow programmer to bind resize event for DOM or HTML element in very simple syntax.
- JQuery resize event for DOM or HTML element.
- You can rename event name with evx.renameEvent("resize","") if event name conflict with other library.
Table of content
Install
Browser
NPM
npm install eventx-resizeobserver-event
Why we need this ???
Problem statement
I want to alert "Too small" if client try to resize element #ex below width 50px and height 50px
Before using this
const target = ; const ro = { forlet entry of entries if entrytarget == target0
if targetwidth < 50 || targetheight < 50 ;
} }}); ro;
Note: Above example require JQuery
After using this
if width < 50 || height < 50 ;
});
Note: Above example require JQuery
Difference
- First and final block obviously shorter.
- Closer to english language.
- Remember easier.
Without JQuery
evx
if width < 50 || height < 50 ;
});
Yeah, still simple and easy.
More detail about this library in this example
Examples
Features
On
;
evx;
- View all JQuery coding style at http://api.jquery.com/on/
- e is a ResizeObserverEntry object
- this = target element (Warning: not working if you use arrow function)
- For more information about ResizeObserverEntry run console.log(e) in event handler or read document
Off
;
evx
- View all JQuery coding style at http://api.jquery.com/off/
Rename Event (Solve event name conflict)
evx