Demo of getting and setting alsoResize option Present option is :
Change the Option for alsoResize To :
2nd
3rd
Resize the Main element by dragging right or bottom borders to check how another element ( 2nd or 3rd ) is also changing. Then change the option by selecting one of the two radio buttons and see how the connected element also changes along with the Main element.
Check the code below to understand how the
alsoResize option value is collected and how the value is set to other element.
Full Code
HTML
<div id="resize_id" class=resize_cl>Main </div>
</div><div class='col-md-4'>
<div id="resize_id2" class=resize_cl>2nd </div>
</div><div class='col-md-4'>
<div id="resize_id3" class=resize_cl>3rd</div>
JQuery
<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
alsoResize: "#resize_id2"
});
/////////
$("input:radio[name=r1]").click(function() {
var r_sel=$(this).val()
// setting the alsoResize option value //
if(r_sel=='2nd'){
$( "#resize_id" ).resizable( "option","alsoResize","#resize_id2" );
}
if(r_sel=='3rd'){
$( "#resize_id" ).resizable( "option","alsoResize","#resize_id3" );
}
var sel = $( "#resize_id" ).resizable( "option", "alsoResize" );
$("#d1").html("Present option is :"+sel);
})
/////////////////
var sel = $( "#resize_id" ).resizable( "option", "alsoResize" );
$("#d1").html("Present option is :"+sel);
/////////
})
</script>
« Tutorial Resizable
Options |
resizable |
alsoResize |
animate |
animate get set |
animateDuration |
animateEasing |
aspectRatio |
autoHide
cancel
classes
containment
disabled
ghost
grid
handles
helper
maxHeight
maxWidth
minWidth
minHeight
Events
destroy
disable enable