CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-resizable
Loupax
Loupax

Reputation: 4914

Resizing an element triggers the resize event of the window

Looks like that when resizing an HTML element, the windows' resize event gets fired as well.

Since I want to execute different logic when resizing elements and when the window gets resized, is there a non-hackish way of dealing with this?

http://jsfiddle.net/CPUwW/1/

$(function(){
    $(window).on('resize', function(){        
          // This event gets fired when the #my_element div gets resized, event if
          // window doesn't get resized itself
          $('#text').text(++resizes);
    });

    $('#my_element').resizable();    
});

In other words, the problem is that when I resize an element, the resize event gets fired for all of it's parents even if their size doesn't change

Upvotes: 6

Views: 10943

Answers (7)

Corvinus Software
Corvinus Software

Reputation: 11

If you just need to differentiate between Browser resizing and Element resizing, you can check the 'bubbles' property of the event (e):

$(window).resize(function(e)
   {
   if (!e.bubbles)
      {
      clearTimeout( resizeId );
      resizeId = setTimeout( doneResizing, 250 );
      }
   });

When the Browser is resized, e.bubbles is False (because it's the top-level entity), but when any Document Element is resized, e.bubbles will be True.

I've tested this in Chrome... with other browsers, YMMV.

Upvotes: 1

Karthick Kumar
Karthick Kumar

Reputation: 1217

This is a bug in jQuery core, But it Can be workarounded with target checking

$(window).resize(function(e) {
if (e.target == window)
/* do your stuff here */;
})

Upvotes: 0

Timo Kähkönen
Timo Kähkönen

Reputation: 12200

According to http://www.quirksmode.org/dom/events/resize.html the resize event is available on the window, but not on the document or other elements (if we ignore some exceptions mentioned at that page).

So it is really unexpectable that changing width and/or height of some element using resizable() causes:
1) resize event firing at all
2) resize event bubbling up to the window object

If I want to make only $('#elem') resizable, that's all I want. Not any bubbling or window resize event firing.

I made a one line change to the example fiddle (and updated the libraries a bit more recent versions):

http://jsfiddle.net/CPUwW/56/

// The following line is the needed change. widgetEventPrefix is
// originally 'resize'. It have to be changed.

$.ui.resizable.prototype.widgetEventPrefix = 'myresize';

$(function(){
    var resizes = 0;
    $(window).on('resize', function(){        
        $('#text').text(++resizes);
    });
    $('#my_element').resizable();    
});

EDIT: The problem in other solutions on this page (and also here) is that bubbling up to the window and firing the window's resize event causes unnecessary overhead if you just want to resize some div or so.

EDIT2: Because widgetEventPrefix is an internal parameter, it's name can change, it can be removed and it's behavior can be changed in new releases of jQuery UI. So, when upgrading UI, check that this works like before.

Upvotes: 2

Daniel
Daniel

Reputation: 4946

Base on other information I think this one reflects the behavior of the window.

$(function () {
    var resizes = 0;

    $(window).on('resize', function () {
        $('#text').text(++resizes);
    });
    $('#my_element').resizable();

    $("#my_element").on('resize', function (e) {
        e.stopPropagation();
    });

});

http://jsfiddle.net/djwave28/CPUwW/7/

Edit: alternative and "more elegant" solution

Although the above solution works flawless, I was not satisfied with having to manage outside the resizable() widget. And it does not have to be. After digging a little deeper, it is possible to stop the propagation within the "create" phase. To show this solution I am adding it to this previous one.

$(function () {
    var resizes = 0;

    $(window).on('resize', function () {
        $('#text').text(++resizes);
    });
    $('#my_element').resizable({
        create: function (event, ui) {
            $(this).parent().on('resize', function (e) {
                e.stopPropagation();
            });
        }
    });
});

updated fiddle: http://jsfiddle.net/djwave28/CPUwW/9/

Upvotes: 12

mavame
mavame

Reputation: 399

Accept e as the first argument to your anonymous function.

It will be the jQuery Event Object with which you can stop the propagation of the event using e.stopPropagation (as suggested by Daniel in the comments above).

$(function(){
  $(#my_element).on('resize', function(e){
    e.stopPropagation();       
    $('#text').text(++resizes);
  });

  $('#my_element').resizable();    
});

PPK has a great write up about Event Order explaining event bubbling and capturing, which is what is causing you trouble here. http://www.quirksmode.org/js/events_order.html

Upvotes: 1

b0zar
b0zar

Reputation: 41

Works for me Demo

    if (e.originalEvent.type == 'resize'){
        $('#textWindow').text(++resizesWindow);
    } else {
        $('#text').text(++resizes);
    }

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

Use e.target:

SEE DEMO

$(window).on('resize', function(e){
        if(e.target===this)        
           $('#text').text(++resizes);
    });

Upvotes: 5

Related Questions