jquery ui resizable left-bottom handle to resize

Question

I am using jquery-ui-resizable plugin in my project.

By default when you make a DOM Object jquery-ui-resizable the resizable handle will appear on right-bottom corne

Answer 1

I was looking for this SW solution. What i had to do to make it work is add the ui-icon classes to the created div just after the call to resizable().

$( "#wproof" ).resizable({handles: "w, sw, s"});
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

Then define the icon by taking it in images/ui-icons_222222_256x240.png It is a small 9X9 area at the bottom. Make a .png file of it ( with a rotation ! ) and add the style to the given class :

The bottom and left are set at -5px in jquery-ui css