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)214proprietary

Since Jun 24Pushed 4w 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 yesterday

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

32

—

LowBetter than 69% of packages

Maintenance62

Regular maintenance activity

Popularity10

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity40

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

739d 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.7k550.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.2k498.4k9](/packages/eonasdan-bootstrap-datetimepicker)[nicolaskruchten/pivottable

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

4.4k219.4k1](/packages/nicolaskruchten-pivottable)[rmm5t/jquery-timeago

jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").

3.8k182.6k2](/packages/rmm5t-jquery-timeago)[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.6k232.2k](/packages/mottie-tablesorter)

PHPackages © 2026

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