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

You can trigger the bars programmatically. For example, to trigger the east-west resize event:

var elem =... // Your ui-resizable element
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first();
var pageX = eastbar.offset().left;
var pageY = eastbar.offset().top;

(eastbar.trigger("mouseover")
        .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY }));

I am doing a 1px left followed by 1px right movement on the east bar handle. To perform a full size, you can target .ui-resizable-handle.ui-resizable-se if you have east and south resize bars.