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);
        }
    }