jqueryui resizable handle does not move with element on a non-jqueryui-resizable-resize

Question

If I make an element resizable with jqueryui and I change the size of this element without using jqueryui resizable, but for example by jquery.css('width'), then the handle of the jqueryui resizable does not move with the element.

HTML:

<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png"/>
<input id="resizeImage" type="button" value="Resize Image" />

Script:

var image = $('#image');
image.resizable();
$('#resizeImage').on('mouseup', function () {
  image.css('width', parseInt(image.width() - 1, 10) + 'px');
});

Example

Any idea how to work-around this?

Answer 1

When you use .resizable(), it wraps that element in <div class="ui-wrapper"></div>. I suggest doing the following:

var image = $('#image');
image.resizable();
$('#resizeImage').on('mouseup', function () {
     image.css('width', parseInt(image.width() - 1, 10) + 'px');
     $('.ui-wrapper').css('width', parseInt(image.width() - 1, 10) + 'px');
});

DEMO: http://jsfiddle.net/Mghhf/5/

Hope this helps!