cowboy/jquery-resize

A resize event for ALL your jQueries!

jQuery resize event

http://benalman.com/projects/jquery-resize-plugin/

Version: 1.1, Last updated: 3/14/2010

With jQuery resize event, you can bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

Note that while this plugin works in jQuery 1.3.2, if an element's event callbacks are manually triggered via .trigger( 'resize' ) or .resize() those callbacks may double-fire, due to limitations in the jQuery 1.3.2 special events system. This is not an issue when using jQuery 1.4+.

Visit the project page for more information and usage examples!

Documentation

http://benalman.com/code/projects/jquery-resize/docs/

Examples

This working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-resize/examples/resize/

Support and Testing

Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).

jQuery Versions

1.3.2, 1.4.1, 1.4.2

Browsers Tested

Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.

Unit Tests

http://benalman.com/code/projects/jquery-resize/unit/

Release History

1.1 - (3/14/2010) Fixed a minor bug that was causing the event to trigger immediately after bind in some circumstances. Also changed $.fn.data to $.data to improve performance.
1.0 - (2/10/2010) Initial release

License

Copyright (c) 2010 "Cowboy" Ben Alman
Dual licensed under the MIT and GPL licenses.
http://benalman.com/about/license/

jquery-resize's Issues

unbinding later bound event in earlier bound trigger fails

Great plugin. I've used it a bunch. I found a bug though that will completely disable the plugin.
The gist is that within a resize trigger, when you unbind a resize event for a later bound resize event, loopy still try's to check the unbound one and it no longer has the needed data.
I've fixed the code (just check that data exists before accessing it) on my machine and have included it here:

  function loopy() {

    // Start the polling loop, asynchronously.
    timeout_id = window[ str_setTimeout ](function(){

      // Iterate over all elements to which the 'resize' event is bound.
      elems.each(function(){
        var elem = $(this),
          width = elem.width(),
          height = elem.height(),
          data = $.data( this, str_data );

        // If element size has changed since the last time, update the element
        // data store and trigger the 'resize' event.
        if (data && ( width !== data.w || height !== data.h ) ) {
          elem.trigger( str_resize, [ data.w = width, data.h = height ] );
        }

      });

      // Loop.
      loopy();

    }, jq_resize[ str_delay ] );

  };

Uncaught TypeError: Cannot set property 'w' of undefined

i get the following error in chrome/firefoxIE8

    jquery.ba-resize.js:198 Uncaught TypeError: Cannot set property 'w' of undefined

    Uncaught TypeError: Cannot set property 'w' of undefined
    new_handlerjquery.ba-resize.js:198
    jQuery.event.handlejquery.js:2260
    jQuery.event.add.elemData.handle.eventHandlejquery.js:1891
    jQuery.each.jQuery.fnjquery.js:7151
    new_handlerjquery.ba-resize.js:198
    jQuery.event.handlejquery.js:2260
    jQuery.event.add.elemData.handle.eventHandlejquery.js:1891

my implementation:

$(".container").resize(function(e){
setTimeout(function() { console.log('resize') }, 10);
});

resize and ui tabs

I've noticed jquery ui tabs triggers the resize event when you switch to a tab.

Simple example:
http://jsfiddle.net/KF6Ka/1/

Is this a bug related to the plugin somehow?

Promote a caretaker

@cowboy Would you consider assigning a caretaker for this repository? There are valid issues and pull requests. Many would like to see this plugin improved upon.

Permission Denied in at least IE8

This may be the same, related, or different error than #5.

At least in IE8 using Jquery 1.10.2 and BA-Resize 1.1:

If you bind a resize event to an child iframe's body (dynamically created iframe in my case, haven't tested others), everything works great until you navigate to another page in the iframe. Once the iframe page loads a second time (and any subsequent time), IE8 throws a "Permission denied" error and the resize event doesn't work after that.

I should disclose than I am also using Ben's EasyXDM, but the child iframe I am talking about is the one created by the producer, not the iframe communicating over EasyXDM. So although I haven't tested it, this point should be moot.

Surya Kumar posted a comment on the BA-Resize site at: http://benalman.com/projects/jquery-resize-plugin/#comment-1062838526

He references some code here as a proposed fix
http://pastebin.com/dTSeLVfj

I've forked and committed it here:
e6b718a

jquery-resize should use the native resize event in browsers which support it

IE <= 8 raises the resize event natively on resized elements, jquery-resize shouldn't use the polling mechanism in these browsers.
Throttling window.resize would still be useful in these browsers.

Issues using .on(...)

Is there anyway to bind to elements added after the handler is called?

Using $('body').on('resize', '#selector', myFunction) doesn't seem to work at all.

Using $('#selector').resize(myFunction) works, but it doesn't bind to elements that are added by ajax.

Add Bower Dependency

Nice lib, would be great if this had a bower.json and it was added to the Bower registry.

IOS Safari

We're using this for a project, and have run into some wierd cases where zooming the safari IOS browser causes a crash.

Has anyone else seen this?

Reproducible on Ipod 4th Generation (6.1.3), Ipad Mini (7.0.4), Ipad 4 (7.0.2)
Not Reproducible on Iphone 5 (7.0.4), Iphone 5C (7.0.4)

Issue with event delegation

Plugin produces the following error when resize event is delegated:

Uncaught TypeError: Cannot set property 'w' of undefined

This error is documented here #1, but the any suggested solutions don't allow event delegation to work.

Here is a fiddle that reproduces the issue. http://jsfiddle.net/e3apze3a/2/

Environment Info
jQuery 3.1.0
Chrome 52.0.2743.116 m (64-bit), Firefox 43.0.1

Conflict with Highcharts + Flot

Great plugin but it conflicts with highcharts and flot. Perhaps its an easy namespace issue?

Thanks

resize event on window is always triggered

I have the following code:

dynamic content

$(window).resize(function(e) {
console.log(e);
}

$("#test").resize(function() {
console.log("resize element");
});

The window resize callback is executed even though the window dimensions did not change.

JQuery 1.7.2

Serious memory leak

Due to a questionable feature in jQuery, the resize code causes a memory leak where it will hold on to every DOM node it has ever tracked. In a single-page application this can be a serious issue if you're creating and destroying things around the place.

jQuery has a strange feature where it keeps references to every state in a series of jQuery method calls, in a property called prevObject. If you keep jQuery references around for a while and do lots of stuff, they can amass a huge chain of prevObject references, preventing anything from being garbage collected. More information: http://blog.cowchimp.com/jquery-prevobject-memory-leak/

This resize library stores its tracked elements in a jQuery array (var elems = $([])), which is never disposed. It then uses mutating functions to add and remove elements. Unfortunately, due to the above jQuery feature, this means that any element that ever enters that elems collection will be retained indefinitely.

The solution is to replace the elems jQuery array with a normal Javascript array.

Not resizing in IE on reduce, on a div

This issue is similar to #13 . Since I'm not always resizing the window, but often just changing the font size, I put the .resize() event function on a div. In IE only, this doesn't work then the font size is reduced, without first having been increased.

I have put debug alerts in the function, and they're not coming up, which suggests that the event is not being triggered.

Handle 'data' null/undefined

Hi, I believe a check for data being null/undefined would improve on your code.
I would like to change line 258 [ if (width !== data.w || height !== data.h) ]
to [ if (data && (width !== data.w || height !== data.h)) ] in the source.

Yours truly

resize fire only once

Hi Ben,
I am using your great solution but i have small problem. Somehow the resize event is fired only once when i set the container size. if i don't set the container size its working fine but i need to change it :).

here is the code i am using, very simple. rootContainer is a div that holds mapContainer. i am using the resize event to make the map container 100%. when i set the size on the mapContianer the event is not fired any more if there is a change is the size.

$(function () {
    $("#rootContainer").resize(function () {
        applyMapResize();
    });

    applyMapResize();
});

function applyMapResize() {
    $("#mapContainer").height($("#rootContainer").height());
}

CPU extreamly high when numerous elements are binded. Suggestion included.

Works well even though window resize is called when it really has not changed.

I noticed the CPUs running up over 80% with less than 10 elements registered and
very little re-sizing activity (really sluggish performance). The main elements, jQGrids
embedded inside jQuery-UI tabs and accordions within a jQuery-Layout.

Code below helps for my situation.

Thanks.

function loopy() {

// Start the polling loop, asynchronously.
timeout_id = window[ str_setTimeout ](function(){

// Iterate over all elements to which the 'resize' event is bound.
var pixelTolerance = jq_resize[ str_pixelTolerance ];
elems.each(function() {
    //
    //  Modified to reduce the CPU load when there are numerous
    // elements registered.  Tested with five+ re-sizable jQGrids
    // embedded into various tabs and accordion elements all inside
    // of a jQuery layout.
    //  With the default delay of 250 the CPU usage is reduced and
    // re-sizing snappy.
    //
    var isVisible  = false;
    var hasResized = false;
    var elem       = $(this);

    try {
         if ($(elem).is(':visible') ) {
             isVisible = true;
         }
    } catch (eThrow) {
         //alert(eThrow.message);
    }

    // No reason to resize hidden elements
    if (isVisible) {
        try {
            // For pixels round down to nearest integer
            var width  = Math.floor(elem.width());
            var height = Math.floor(elem.height());
            var data   = $.data( this, str_data );
            data.w     = Math.floor(data.w);
            data.h     = Math.floor(data.h);

            // Reduce number of resizes, default 10 pixels
            if (   (Math.abs(width - data.w)  > pixelTolerance)
                || (Math.abs(height - data.h) > pixelTolerance)) {
                hasResized = true;
            }

            //  If element size has changed
            // trigger the 'resize' event and
            // update the data store
            if (hasResized) {
                elem.trigger( str_resize, [ width, height ] );
                //  Some elements will not re-size exactly
                // so try to get the latest size available
                // before storing
                data.w = Math.floor(elem.width());
                data.h = Math.floor(elem.height());
            }
        } catch (eThrow) {
            //alert(eThrow.message);
        }
    }

  });

  // Loop.
  loopy();

}, jq_resize[ str_delay ] );

Window resize not working when decreasing size

When I use $(window).resize with this plugin the resize call works fine when expanding but when collapsing the moment the page starts scrolling the resize callback stops firing. Disabling this plugin fixes it. Changing throttleWindow to false fixes it as well.

TypeError: r is undefined

Any ideas?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of cowboy/jquery-resize!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library cowboy/jquery-resize is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "cowboy/jquery-resize",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!