How to trigger jquery Resizable resize programmatically?

Question

I have a div element which is made jquery Resizable. It has alsoResize option set, so other elements resize simultaneously.

What I want to do, is to set size of this

Answer 1

I needed the same thing for tests. Similar questions have only one promising answer https://stackoverflow.com/a/17099382/1235394, but it requires additional setup, so I ended with my own solution.

I have an element with resizable right edge

$nameHeader.resizable({handles: 'e', ... });

and I needed to trigger all callbacks during the test in order to resize all elements properly. The key part of test code:

var $nameHeader = $list.find('.list-header .name'),
    $nameCell = $list.find('.list-body .name');
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable');
equal($nameCell.outerWidth(), 300, 'Initial width of Name column');

// retrieve instance of resizable widget
var instance = $nameHeader.data('ui-resizable'),
    position = $nameHeader.position(),
    width = $nameHeader.outerWidth();
ok(instance, 'Instance of resizable widget should exist');

// mouseover initializes instance.axis to 'e'
instance._handles.trigger('mouseover');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});

// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, 'Name column width should change');

Of course this code is brittle and may break when widget implementation changes.