Need private packages and team management tools?Check out npm Teams »

eventx-resizeobserver-event

0.1.2 • Public • Published

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

<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

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)])

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

Install

npm i eventx-resizeobserver-event

DownloadsWeekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

95.3 kB

Total Files

13

Last publish

Collaborators

  • avatar