Search code examples
jqueryjquery-uiresizable

jQuery UI resizable snap to size

I have a left-side navigation which is resizable. The default width is 200 and I want the resizer to snap to that width. Currently I have this if-clause which is working fine but I don't know how to snap to that width programmatically. 

resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 20){
        // snap to 200 width
    }
}

Would be great if someone could help me here :)

Solution

  • Ok got it working. Simply set the width of the element to 200. It has a tolerance of 15px so if the element is between 185 and 215px it will snap to 200px.

    $("#left").resizable({
minWidth: 60,
handles: "e",
resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 15){
        $("#left").css("width", 200);
    }
}