https://github.com/chomtana/eventx-resizeobserver-event
Allow programmer to bind resize event for DOM or HTML element in very simple syntax (You can also use JQuery to bind resize event).
https://github.com/chomtana/eventx-resizeobserver-event
event resize resize-events resize-observer
Last synced: about 2 months ago
JSON representation
Allow programmer to bind resize event for DOM or HTML element in very simple syntax (You can also use JQuery to bind resize event).
- Host: GitHub
- URL: https://github.com/chomtana/eventx-resizeobserver-event
- Owner: Chomtana
- License: mit
- Created: 2018-04-20T09:05:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-23T01:22:39.000Z (about 8 years ago)
- Last Synced: 2025-01-19T06:28:00.630Z (over 1 year ago)
- Topics: event, resize, resize-events, resize-observer
- Language: JavaScript
- Homepage:
- Size: 209 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
* [Installation](#install)
* [Why we need this ???](#why-we-need-this-)
* [Examples](#examples)
* [For Getting started](https://jsfiddle.net/Chomtana/zyjy6xsk/)
* [High detail (Show both **on** and **off**)](https://jsfiddle.net/Chomtana/o3roqcc0/)
* [Features](#features)
* [On](#on)
* [Off](#off)
* [Rename Event (Solve event name conflict)](#rename-event-solve-event-name-conflict)
## Install
### Browser
```html
```
### 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
```javascript
const target = $("#ex");
const ro = new ResizeObserver(entries => {
for(let entry of entries) {
if (entry.target == target[0]) {
```
```javascript
if (target.width() < 50 || target.height() < 50) alert("Too small");
```
```javascript
}
}
});
ro.observe(target[0]);
```
**Note:** Above example require JQuery
[View and play in JSFiddle](https://jsfiddle.net/Chomtana/fLe166sL/)
### After using this
```javascript
$("#ex").on("resize",function(e) {
```
```javascript
if ($(this).width() < 50 || $(this).height() < 50) alert("Too small");
```
```javascript
});
```
**Note:** Above example require JQuery
[View and play in JSFiddle](https://jsfiddle.net/Chomtana/zyjy6xsk/)
### Difference
* First and final block obviously shorter.
* Closer to english language.
* Remember easier.
### Without JQuery
```javascript
evx.on(document.getElementById("ex"),"resize",function(e) {
```
```javascript
if ($(this).width() < 50 || $(this).height() < 50) alert("Too small");
```
```javascript
});
```
Yeah, still simple and easy.
**More detail about this library in this [example](https://jsfiddle.net/Chomtana/o3roqcc0/)**
## Examples
* [For Getting started](https://jsfiddle.net/Chomtana/zyjy6xsk/)
* [High detail (Show both **on** and **off**)](https://jsfiddle.net/Chomtana/o3roqcc0/)
## Features
### On
```javascript
$("#ex").on("resize",function(e) { console.log(e,this); ... });
```
```javascript
evx.on(,"resize",function(e) { console.log(e,this); ... });
```
* 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](https://wicg.github.io/ResizeObserver/#resize-observer-entry-interface)
### Off
```javascript
$("#ex").off("resize");
```
```javascript
evx.off(,"resize",[handler (Optional)])
```
* View all JQuery coding style at http://api.jquery.com/off/
### Rename Event (Solve event name conflict)
```javascript
evx.renameEvent("resize","")
```
### Create new event type
[Read at EventX-core](https://github.com/Chomtana/EventX-core#create-new-event)
### Remove event type
[Read at EventX-core](https://github.com/Chomtana/EventX-core)