jQuery UI Resizable: set size programmatically?

Question

For example, user inputs width and height values to tell the widget to resize to that dimension. How to implement this?

Answer 1

You can extend original Resizable widget like follow:

(function( $ ) {
    $.widget( "custom.mysizable", $.ui.resizable, {

        options: {
            x: 0,
            y: 0
        },

        _create: function() {
            $.ui.resizable.prototype._create.call(this);
            this.options['x'] = $(this.element).width();
            this.options['y'] = $(this.element).height();
        },

        _resize: function(x, y) {
            if( x != null ){
                $(this.element).width( x );
            }
            if( y != null ){
                $(this.element).height( y );
            }
            this._proportionallyResize();
        },

        _setOption: function( key, value ) {
            this.options[ key ] = value;
            this._update();
        },

        _update: function() {
            this._resize(
                this.options['x'],
                this.options['y']
            );
        },

        _destroy: function() {
            $.ui.resizable.prototype._destroy.call(this);
        }
    });
})( jQuery );

To use it

$('#myElement').mysizable('option', 'y', 100);
$('#myElement').mysizable('option', 'x', 100);