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 Resizable div element programmatically in such way, that all Resizable logic is triggered (especially this alsoResize option is taken into account).

How can I achieve that?

Answer 1

Update: It looks like the internals of jQuery UI have changed dramatically since I answered this and firing the event no longer works.

There's no direct way to fire the event anymore because the resizable plugin has been fundamentally changed. It resizes as the mouse is dragged rather than syncing items up at the end. This happens by it listening for the internal resize propagation event for resizable plugins which is now fired by the _mouseDrag handler. But it depends on variables set along the way, so just firing that even internally won't help.

This means even overriding it is messy at best. I'd recommend just manually resizing the alsoResize elements directly, independent of the UI widget altogether if that's possible.

But for fun let's say it isn't. The problem is that the internals of the plugin set various properties relating to previous and current mouse position in order to know how much to resize by. We can abuse use that to add a method to the widget, like this:

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = 'se';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});

This is just creating the mouse events that the resizable widget is looking for and firing those. If you wanted to do something like resizeBy it'd be an even simpler end since all we care about is the delta:

var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });

You'd call the $.widget() method after jQuery UI and before creating your .resizable() instances and they'll all have a resizeTo method. That part doesn't change, it's just:

$(".selector").resizable({ alsoResize: ".other-selector" });

Then to resize, you'd call that new resizeTo method like this:

$(".selector").resizable("resizeTo", { height: 100, width: 200 });

This would act as if you instantly dragged it to that size. There are of course a few gotchas here:

• The "se" axis is assuming you want resize by the bottom right - I picked this because it's by far the most common scenario, but you could just make it a parameter.
• We're hooking into the internal events a bit, but I'm intentionally using as few internal implementation details as possible, so that this is less likely to break in the future.
• It could absolutely break in future versions of jQuery UI, I've only tried to minimize the chances of that.

You can play with it in action with a fiddle here and the resizeBy version here.

---

Original answer:

You can do this:

$(".selector").trigger("resize");

alsoResize internally rigs up a handler to the resize event, so you just need to invoke that :)