Response title
This is preview!
ui.resizable / return false in option.resize event to prevent further resize
in Developing jQuery UI
•
11 years ago
Hi there,
The scenario is as follows: I've got two elements in my document - one of them has resizable applied to it (A), the second one doesn't (B). I'm using option.resize to alter the width of the B element when A is resized, ie. shrink B. But when B's width is at 10px I don't want A to cause any more shrinking, nor I want to resize A to overlap on B. The idea is to allow resize option to return false, which would prevent further resize of A (in this instance if width of B is <= 10px and resize occurs to the left).
Code to give an example:
The scenario is as follows: I've got two elements in my document - one of them has resizable applied to it (A), the second one doesn't (B). I'm using option.resize to alter the width of the B element when A is resized, ie. shrink B. But when B's width is at 10px I don't want A to cause any more shrinking, nor I want to resize A to overlap on B. The idea is to allow resize option to return false, which would prevent further resize of A (in this instance if width of B is <= 10px and resize occurs to the left).
Code to give an example:
- <body>
<style>
.box {width: 100px; height: 100px; float: left; margin: 10px}
.a {background-color: #ff0000;}
.b {background-color: #00ff00;}
</style>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> <script type='text/javascript'>
$(document).ready(function()
{
$('.a').resizable({
handles: "e, w",
ghost: true,
start: function(event, ui){
$('.b').data('width',$('.b').width());
},
resize: function(event, ui){
if (ui.originalPosition.left != ui.position.left)
{
$('.b').width($('.b').data('width') + ui.originalSize.width - ui.size.width);
}
},
stop: function(event, ui){
$(this).css('left','0px');
}
});
});
</script>
<div class='box b'>B</div>
<div class='box a'>A</div>
</body>
- // plugins callbacks need to be called first
this._propagate("resize", event);
// calling the user callback at the end
if (this._trigger('resize', event, this.ui()))
{
el.css({
top: this.position.top + "px", left: this.position.left + "px",
width: this.size.width + "px", height: this.size.height + "px"
});
if (!this._helper && this._proportionallyResizeElements.length)
this._proportionallyResize();
this._updateCache(data);
}
1