I am trying to do detect element resize with jquery resize plugin (/) on jquery 1.10.2.

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

I did the testing on Firefox 25 and I get this error:

Error: TypeError: r is undefined
Source File: jquery.ba-resize.min.js
Line: 9

How can I solve it? Is there any alternative way / plugin for doing this?

Thank you.

I am trying to do detect element resize with jquery resize plugin (http://benalman./projects/jquery-resize-plugin/) on jquery 1.10.2.

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

I did the testing on Firefox 25 and I get this error:

Error: TypeError: r is undefined
Source File: jquery.ba-resize.min.js
Line: 9

How can I solve it? Is there any alternative way / plugin for doing this?

Thank you.

• javascript
• jquery
• jquery-plugins

• Just remove that plug-in ! , and you will done with it – l2aelba Commented Nov 13, 2013 at 14:33

4 Answers 4

You need a resize sensor which is bundled with css-element-queries of https://github./marcj/css-element-queries.

new ResizeSensor($('.elements'), function(){
    console.log('resize')
});

jQuery's .resize only works on window object since only window has a event onresize. All other element haven't and thus you need a polyfill for that. I've seen a lot of other jQuery plugins that allow you to listen on resize changes of all element types, but take care: These are incredible slow as they use setTimeout() or interval to check it's dimension change instead of setting up a real resize sensor like the one you can find in the link above.

Using Clay.js (https://github./zzarcon/clay) it's quite simple to detect changes on element size:

var el = new Clay('.element');

el.on('resize', function(size) {
   console.log(size.height, size.width);
});

DIV does not fire a resize event, so you won't be able to do exactly what you've coded, but you could look into monitoring DOM properties.

If you are actually working with something like resizables, and that is the only way for a div to change in size, then your resize plugin will probably be implementing a callback of its own.

Remove that plug-in, jQuery done with it self.

var element = $('#element');
var current_size = element.width()+'x'+element.height();
element.resize(function(){ 
    var this_size = $(this).width()+'x'+$(this).height();
    if(current_size!==this_size){
      console.log('changed');
      current_size = this_size;
    }
});

PS : Doesn't test