SO - 18027887

by Arun P Johny

HTML

<a id="tamer" href="javascript:dontKeep('resizable')">dont keep aspect ratio</a>
<br/>
<a id="tamer" href="javascript:keep('resizable')">keep aspectratio</a>
<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

CSS

#resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }

JavaScript

function dontKeep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
        aspectRatio:false
    });
    alert("dont keep");
}
function keep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
        aspectRatio:true
    });
    alert("keep");
}

jQuery(function($){
    $('#resizable').resizable({
        aspectRatio:false
    });
    $('.ui-resizable-se').hover(function(){
        keep("resizable");
    });
    $('.ui-resizable-e').hover(function(){
        dontKeep("resizable");
    });
    
})