2

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

user949952
  • 125
  • 3
  • 6

3 Answers3

0

I use for this following code:

function resize(target, new_width, new_height){ 
    var $wrapper = $(target).resizable('widget'),
        $element = $wrapper.find('.ui-resizable'),
        dx = $element.width()  - new_width,
        dy = $element.height() - new_height;

    $element.width( new_width );
    $wrapper.width( $wrapper.width() - dx );
    $element.height( new_height );
    $wrapper.height( $wrapper.height() - dy );
}
Zhitko Vladimir
  • 61
  • 1
  • 5
0

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);
Zhitko Vladimir
  • 61
  • 1
  • 5
0
var w = prompt('width?')*1;
var h = prompt('height?')*1;
$('#resizable').css('width', w );
$('#resizable').css('height', h );

You don't need to use jqueryui's resizable in order to resize it in script. The jQuery .css() method applies for any DOM element. You can also animate({width: 500},1000).

Tasos Bitsios
  • 2,699
  • 1
  • 16
  • 22
  • 1
    I tried that. The `$('#resizable')` widget did get resized, but it leaves a blank space between `$('#resizable')` and the `$('.ui-wrapper')` injected by jQuery UI. Sure I know I can adjust the size of `$('.ui-wrapper')` as well. I just wonder if there is more elegant way to do this. Isn't it a common case? – user949952 Sep 21 '11 at 21:40
  • 1
    I don't get that when I try to run this code on the console on this page: http://jqueryui.com/demos/resizable/ ... No blanks. But yes, resize whatever you need to resize. The absence of a setSize() method from jQuery's resizeable does strike me as a little weird, though. – Tasos Bitsios Sep 23 '11 at 12:44