For example, user inputs width and height values to tell the widget to resize to that dimension. How to implement this?
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);
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 );
}
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)
.