PHPackages                             webcito/jquery-resize - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/jquery-resize

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/jquery-resize
=====================

description

1.0.0(2y ago)215proprietary

Since Jun 24Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/ThomasDev-de/jquery-resize)[ Packagist](https://packagist.org/packages/webcito/jquery-resize)[ RSS](/packages/webcito-jquery-resize/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

jQuery Resize Plugin
====================

[](#jquery-resize-plugin)

[![License](https://camo.githubusercontent.com/7e514ce290df032d8491292467da952c904093f4b08e58885b14238d563a2480/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d70726f70726965746172792d6f72616e67652e737667)](composer.json)[![jQuery](https://camo.githubusercontent.com/c950109a6c2a2a93ec3ee569eab89ce5c8429772d6ed523ef2cd46ffb9da28e6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a71756572792d253545332e302d626c75652e737667)](https://jquery.com/)

A lightweight jQuery plugin that adds a robust `resize` event to **any** HTML element using `ResizeObserver`. Unlike the native window resize event, this plugin tracks size changes of individual elements and provides detailed information about the change.

[![example](demo/img/example_resize.png)](demo/img/example_resize.png)

Features
--------

[](#features)

- **Element-level resize tracking**: Monitor any element, not just the `window`.
- **Detailed change data**: Get the axis of change (`x`, `y`, or `both`), new dimensions, previous dimensions, and the calculated difference.
- **Debouncing**: Built-in support for debouncing to prevent performance issues during rapid resizing.
- **Debug Mode**: Optional visual feedback directly within the element for easier development.
- **Flexible API**: Support for both event listeners and direct callback functions.
- **Manual Triggering**: Ability to manually trigger a resize check.

Installation
------------

[](#installation)

Include jQuery and the plugin in your project:

```

```

Or via Composer:

```
composer require webcito/jquery-resize
```

Usage
-----

[](#usage)

### Basic Initialization

[](#basic-initialization)

Initialize the plugin on your elements:

```
$('.my-element').resize();
```

### With Event Listener

[](#with-event-listener)

The plugin triggers a standard jQuery `resize` event but passes additional arguments to the handler:

```
$('.my-element').on('resize', function(event, axis, afterSizes, beforeSizes, diffSizes) {
    console.log('Resize axis:', axis); // 'x', 'y', or 'both'
    console.log('New size:', afterSizes); // { width: 100, height: 100 }
    console.log('Old size:', beforeSizes); // { width: 90, height: 100 }
    console.log('Difference:', diffSizes); // { width: 10, height: 0 }
});
```

### With Callback Function

[](#with-callback-function)

You can pass a callback directly to the `.resize()` method:

```
$('.my-element').resize(function(axis, afterSizes, beforeSizes, diffSizes) {
    console.log('Resized on axis:', axis);
});
```

### Configuration Options

[](#configuration-options)

You can pass an options object to the initialization:

```
$('.my-element').resize({
    wait: 300,   // Debounce wait time in milliseconds (default: 400)
    debug: true  // Show dimension info inside the element (default: false)
});
```

Global Configuration
--------------------

[](#global-configuration)

Set default values for all future initializations:

```
$.setupResize.setDefaults({
    wait: 200,
    debug: false
});
```

Manual Trigger
--------------

[](#manual-trigger)

Force a resize calculation and event trigger:

```
$('.my-element').resize('resize');
```

API Reference
-------------

[](#api-reference)

### Arguments for Event/Callback

[](#arguments-for-eventcallback)

ArgumentTypeDescription`axis``string`The axis that changed: `'x'`, `'y'`, or `'both'`.`afterSizes``object`The new dimensions: `{ width: number, height: number }`.`beforeSizes``object`The dimensions before the resize: `{ width: number, height: number }`.`diffSizes``object`The difference between new and old sizes: `{ width: number, height: number }`.### Options

[](#options)

OptionTypeDefaultDescription`wait``number``400`Debounce time in milliseconds.`debug``boolean``false`If true, overlays resize info on the element.Requirements
------------

[](#requirements)

- jQuery 3.0 or higher
- Modern browser with `ResizeObserver` support (Chrome 64+, Firefox 69+, Safari 13.1+, Edge 79+)

License
-------

[](#license)

This project is licensed under the proprietary License - see the composer.json file for details.

###  Health Score

30

—

LowBetter than 61% of packages

Maintenance57

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

785d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (13 commits)")

---

Tags

javascriptjquery-pluginresize

### Embed Badge

![Health badge](/badges/webcito-jquery-resize/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-jquery-resize/health.svg)](https://phpackages.com/packages/webcito-jquery-resize)
```

###  Alternatives

[eternicode/bootstrap-datepicker

A datepicker for Bootstrap

12.7k552.0k6](/packages/eternicode-bootstrap-datepicker)[vakata/jstree

jsTree is jquery plugin, that provides interactive trees.

5.2k1.8M11](/packages/vakata-jstree)[eonasdan/bootstrap-datetimepicker

Date/time picker widget based on twitter bootstrap

7.2k500.2k9](/packages/eonasdan-bootstrap-datetimepicker)[nicolaskruchten/pivottable

Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.

4.4k223.4k1](/packages/nicolaskruchten-pivottable)[mottie/tablesorter

tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

2.6k234.4k](/packages/mottie-tablesorter)[components/jqueryui

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

1775.9M61](/packages/components-jqueryui)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)