CODEWITHSUNDEEP
javascriptjquery-uieventsjquery-ui-resizable
Hunter XYZ
Hunter XYZ

Reputation: 23

jQuery UI resizable - event trigger on minWidth, maxWidth, minHeight, maxHeight exceeded

I can not find an event that notice me when the min/max limits are reached or exceeded in the API documentation.

Is there an option to do it, without checking the limits by myself?

Upvotes: 1

Views: 1220

Answers (1)

T J
T J

Reputation: 43156

As far as i know, your only option is to manually check whether the min/maxlimits are reached or not. You can use the size property of the ui object passed to the resize event callback to access the current width and height, and the option method for accessing the min and max values.

$(function () {
    $("#resizable").resizable({
        minWidth: 50,
        minHeight: 50,
        maxWidth: 250,
        maxHeight: 200,
        resize: function (event, ui) {
            var $elm = ui.element;
            if (ui.size.width <= $elm.resizable("option", "minWidth"))
               console.log("Reached Min Width!");

            if (ui.size.height <= $elm.resizable("option", "minHeight"))
               console.log("Reached Min Height!");

            if (ui.size.width >= $elm.resizable("option", "maxWidth"))
               console.log("Reached Max Width!");

            if (ui.size.height >= $elm.resizable("option", "maxHeight"))
               console.log("Reached Max Height!");
        }
    });
});
#resizable {
    width:100px;
    background:dogerblue;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="resizable" class="ui-widget-content">
     <h3 class="ui-widget-header">Resizable</h3>
</div>

Anyway, it'd be nice to have that option: I've created a Feature Request @ jQuery ui.

Upvotes: 3

Related Questions