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
• Why we need this ???
• Examples
  • For Getting started
  • High detail (Show both on and off)
• Features
  • On
  • Off
  • Rename Event (Solve event name conflict)

Install

Browser

<script src="https://cdn.rawgit.com/Chomtana/EventX-ResizeObserver-event/ec675c5c/dist/eventx-resize.js"></script>

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 = $("#ex");

const ro = new ResizeObserver(entries => {
  for(let entry of entries) {
    if (entry.target == target[0]) {

      if (target.width() < 50 || target.height() < 50) alert("Too small");

    }
  }
});

ro.observe(target[0]);

Note: Above example require JQuery

View and play in JSFiddle

After using this

$("#ex").on("resize",function(e) {

  if ($(this).width() < 50 || $(this).height() < 50) alert("Too small");

});

Note: Above example require JQuery

View and play in JSFiddle

Difference

• First and final block obviously shorter.
• Closer to english language.
• Remember easier.

Without JQuery

evx.on(document.getElementById("ex"),"resize",function(e) {

  if ($(this).width() < 50 || $(this).height() < 50) alert("Too small");

});

Yeah, still simple and easy.

More detail about this library in this example

Examples

• For Getting started
• High detail (Show both on and off)

Features

On

$("#ex").on("resize",function(e) { console.log(e,this); ... });

evx.on(<target HTMLElement>,"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

Off

$("#ex").off("resize");

evx.off(<target HTMLElement>,"resize",[handler (Optional)])

• View all JQuery coding style at http://api.jquery.com/off/

Rename Event (Solve event name conflict)

evx.renameEvent("resize","<newname>")

Create new event type

Read at EventX-core

Remove event type

Read at EventX-core