Demo of Resizable with minWidth option
While resizing, the width of the element is restricted to value of
minWidth option. We can set ( update ) the value and read the set value of
minWidth .
By selecting the radio buttons we can change the value of of
minWidth option. You can try to drag the element in left or right direction after changing the selections of radio buttons.
We are reading the set value and displaying the same.
« Tutorial Resizable
Full Code
<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
minWidth:400,
handles : "n,e,ne,w,s,nw"
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "minWidth" );
$('#d1').html( " <b>Value of minWidth Option:</b> " + read_opt );
/////// Clikc event of radio buttons///
$("input:radio[name=r1]").click(function() {
var sel=$(this).val();
// set the option value
$( "#resize_id" ).resizable( "option", "minWidth", sel );
// get the option value
var read_opt = $( "#resize_id" ).resizable( "option", "minWidth" );
$('#d1').html( " <b>Status of minWidth:</b> " + read_opt );
})
////Click event end///
})
</script>
HTML
<table class='table'>
<tr><td>
<input type='radio' name='r1' id='r1' value=100 >100</td>
<td><input type='radio' name='r1' id='r2' value=200>200</td>
<td><input type='radio' name='r1' id='r2' value=400 checked>400</td>
<td>
<button type='button' class='btn btn-secondary' id=d1></button></td>
</tr></table>
<br><br>
<div class='row'> <div class='col-md-12'>
<div id="resize_id" class=resize_cl></div>
</div></div>
« 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