🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin that adds the “resize” event to all elements. Have you ever wanted to listen for a resize event on an element other than window? This plugin listens for a resize event on any element and then triggers the resize event using jQuery so any Event Listeners will be called. Simply call the plugin on the element before adding the resize Event Listener.

Events Plugins

Documentation

DEPRECIATED

First off jQuery is dead. Secondly there is a new ResizeObserver web standard, which has many polyfills available online. You should use that instead of this.

Resize Triggering

2.0.0

$("#myElement").resizeTriggering().on("resize", function(e){   // Code to handle resize });

Resize event for none window elements

Have you ever wanted to listen for a resize event on an element other than window? This plugin listens for a resize event on any element and then triggers the resize event using jQuery so any Event Listeners will be called. Simply call the plugin on the element before adding the resize Event Listener.

Check Interval

The plugin works by periodically checking to see if the elements size has changed. By default it checks every 16 milliseconds (60 fps), but you can adjust this value by setting the $.ResizeTriggeringInterval value.

$.ResizeTriggeringInterval = 1000; // Checks once every second

Example

<!DOCTYPE html> <html> <head>   <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>   <script src='src/ResizeTriggering.js'></script>   <script>     $(function(){       $second = $("#second");       $second.resizeTriggering().on("resize", function(){         $("#size").html($second.width()+" x "+$second.height());       });     });     function doIt(){       $("#wrapper").toggleClass("doIt");     }   </script>   <style>     #wrapper {       display: flex;     }     #first,     #second {       flex: 1;       border: 1px solid black;       margin: 16px;       padding: 16px;       height: 100px;       transition: flex 0.5s, height 0.5s;     }     #wrapper.doIt #first,     #wrapper.doIt #second {       height: 300px;     }     #wrapper.doIt #first {       flex: 3;     }   </style> </head> <body>   <div id='wrapper'>     <div id='first'>       <button onclick='doIt()'>Do It</button>     </div>     <div id='second'>       <p>Size: <span id='size'></span></p>     </div>   </div> </body> </html>

99.99% Support

Supports all major (and minor) browsers from IE7+ (all browsers supported by jQuery 1+).

License

This software is property of Dustin Poissant.

This software is distributed AS-IS with no warranties/guarantees either expressed or implied.

This software is Licensed under CC BY-NC-SA 3.0 US.


You May Also Like