{"id":20853263,"url":"https://github.com/chomtana/eventx-resizeobserver-event","last_synced_at":"2026-04-16T13:38:16.405Z","repository":{"id":114265523,"uuid":"130337859","full_name":"Chomtana/EventX-ResizeObserver-event","owner":"Chomtana","description":"Allow programmer to bind resize event for DOM or HTML element in very simple syntax (You can also use JQuery to bind resize event).","archived":false,"fork":false,"pushed_at":"2018-04-23T01:22:39.000Z","size":214,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T06:28:00.630Z","etag":null,"topics":["event","resize","resize-events","resize-observer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chomtana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-20T09:05:19.000Z","updated_at":"2018-04-23T01:22:40.000Z","dependencies_parsed_at":"2023-05-03T21:15:35.592Z","dependency_job_id":null,"html_url":"https://github.com/Chomtana/EventX-ResizeObserver-event","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"4dc1b351b9d2c6bed726128e5c69354c0d3b2ca4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chomtana%2FEventX-ResizeObserver-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chomtana%2FEventX-ResizeObserver-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chomtana%2FEventX-ResizeObserver-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chomtana%2FEventX-ResizeObserver-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chomtana","download_url":"https://codeload.github.com/Chomtana/EventX-ResizeObserver-event/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243222185,"owners_count":20256229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["event","resize","resize-events","resize-observer"],"created_at":"2024-11-18T03:20:28.488Z","updated_at":"2025-12-26T14:06:40.010Z","avatar_url":"https://github.com/Chomtana.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EventX-ResizeObserver-event\n* Allow programmer to bind resize event for DOM or HTML element in very simple syntax.\n* JQuery resize event for DOM or HTML element.\n* You can rename event name with evx.renameEvent(\"resize\",\"\u003cnewname\u003e\") if event name conflict with other library.\n  \n# Table of content\n* [Installation](#install)\n* [Why we need this ???](#why-we-need-this-)\n* [Examples](#examples)\n  * [For Getting started](https://jsfiddle.net/Chomtana/zyjy6xsk/)\n  * [High detail (Show both **on** and **off**)](https://jsfiddle.net/Chomtana/o3roqcc0/)\n* [Features](#features)\n  * [On](#on)\n  * [Off](#off)\n  * [Rename Event (Solve event name conflict)](#rename-event-solve-event-name-conflict)\n\n## Install\n### Browser\n```html\n\u003cscript src=\"https://cdn.rawgit.com/Chomtana/EventX-ResizeObserver-event/ec675c5c/dist/eventx-resize.js\"\u003e\u003c/script\u003e\n```\n\n### NPM\n```\nnpm install eventx-resizeobserver-event\n```\n\n## Why we need this ???\n### Problem statement\nI want to alert \"Too small\" if client try to resize element #ex below width 50px and height 50px\n\n### Before using this\n```javascript\nconst target = $(\"#ex\");\n\nconst ro = new ResizeObserver(entries =\u003e {\n  for(let entry of entries) {\n    if (entry.target == target[0]) {\n```\n```javascript\n      if (target.width() \u003c 50 || target.height() \u003c 50) alert(\"Too small\");\n```\n```javascript\n    }\n  }\n});\n\nro.observe(target[0]);\n```\n**Note:** Above example require JQuery\n\n[View and play in JSFiddle](https://jsfiddle.net/Chomtana/fLe166sL/)\n\n### After using this\n```javascript\n$(\"#ex\").on(\"resize\",function(e) {\n```\n```javascript\n  if ($(this).width() \u003c 50 || $(this).height() \u003c 50) alert(\"Too small\");\n```\n```javascript\n});\n```\n**Note:** Above example require JQuery\n\n[View and play in JSFiddle](https://jsfiddle.net/Chomtana/zyjy6xsk/)\n\n### Difference\n* First and final block obviously shorter.\n* Closer to english language.\n* Remember easier.\n\n### Without JQuery\n```javascript\nevx.on(document.getElementById(\"ex\"),\"resize\",function(e) {\n```\n```javascript\n  if ($(this).width() \u003c 50 || $(this).height() \u003c 50) alert(\"Too small\");\n```\n```javascript\n});\n```\nYeah, still simple and easy.\n\n**More detail about this library in this [example](https://jsfiddle.net/Chomtana/o3roqcc0/)**\n\n## Examples\n* [For Getting started](https://jsfiddle.net/Chomtana/zyjy6xsk/)\n* [High detail (Show both **on** and **off**)](https://jsfiddle.net/Chomtana/o3roqcc0/)\n\n## Features\n### On\n```javascript\n$(\"#ex\").on(\"resize\",function(e) { console.log(e,this); ... });\n```\n```javascript\nevx.on(\u003ctarget HTMLElement\u003e,\"resize\",function(e) { console.log(e,this); ... });\n```\n* View all JQuery coding style at http://api.jquery.com/on/\n* e is a ResizeObserverEntry object\n* this = target element **(Warning: not working if you use arrow function)**\n* For more information about **ResizeObserverEntry** run console.log(e) in event handler or read [document](https://wicg.github.io/ResizeObserver/#resize-observer-entry-interface)\n\n### Off\n```javascript\n$(\"#ex\").off(\"resize\");\n```\n```javascript\nevx.off(\u003ctarget HTMLElement\u003e,\"resize\",[handler (Optional)])\n```\n* View all JQuery coding style at http://api.jquery.com/off/\n\n### Rename Event (Solve event name conflict)\n```javascript\nevx.renameEvent(\"resize\",\"\u003cnewname\u003e\")\n```\n\n### Create new event type\n[Read at EventX-core](https://github.com/Chomtana/EventX-core#create-new-event)\n\n### Remove event type\n[Read at EventX-core](https://github.com/Chomtana/EventX-core)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchomtana%2Feventx-resizeobserver-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchomtana%2Feventx-resizeobserver-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchomtana%2Feventx-resizeobserver-event/lists"}