jQuery Based Resize Observer - hwt.jquery.resizeobserver.js

A really simple, cross-browser, jQuery based Resize Observer for developers that observe and react to any change of the viewport’s dimensions.

How to use it:

1. Put the JavaScript file hwt.jquery.resizeobserver.js after the latest jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="hwt.jquery.resizeobserver.js"></script>

2. In your document ready function to use the resize observer.

jQuery(document).ready(function () {
  "use strict";
  resizeObserver();
});

3. Execute a custom function when the viewport is resized.

jQuery(document).ready(function () {
  "use strict";
  resizeObserver(
    function() {
      // do something
    }
  );
});

4. Set the refresh time in milliseconds for the Resize Observer.

jQuery(document).ready(function () {
  "use strict";
  resizeObserver(
    function() {
      // do something
    },
    200
  );
});

5. Set the offset in x-dimension.

jQuery(document).ready(function () {
  "use strict";
  resizeObserver(
    function() {
      // do something
    },
    200,
    20
  );
});

---

This awesome jQuery plugin is developed by tieupmedia. For more Advanced Usages, please check the demo page or visit the official website.