jQuery resizable specify different maximum for each direction

Question

I would specify different maximum constraint on a resizable div. For example, I want a maximum resize of 20px in north direction and 200px in south.

I can easily do it for only one direction with maxHeight and by restricting the handle to one direction, but I can't manage the both at the same time.

Is it absolutely impossible ?

Answer 1

Please, jQuery and jQuery UI are not the same.

jQuery UI resizable widget gives you a set of options. One of them is maxHeight as you noticed, but there is also minHeight. And of course the equivalents for width.

If you have a fixed height item (100px), you can simply use this code to have 20px north and 200px south :

$("#resizable").resizable(
{
    maxHeight: 300,
    minHeight: 80
});

Now if you do not know its variable height, you can always find it out with jQuery:

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20
});

And even better, if you'd like to be able to resize it with steps of 20px/200px, you could try using the stop event :

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20,
    stop: function(event,ui)
    {
        $("#resizable").resizable("option","maxHeight",parseInt($("#resizable").height(),10)+200);
        $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10)-20);
    }
});

Now if you want to increase its height with two different handles but have separate limits, you could use the class of the handle to force another limit :

var originalHeight = parseInt($("#resizable").height(),10);
$("#resizable").resizable(
{
    maxHeight: originalHeight+20,
    minHeight: originalHeight, // decrease height impossible
    start: function(event,ui)
    {
        if($(event.originalEvent.target).hasClass('ui-resizable-s'))
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+200);
        }
        else
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+20);
        }
    }
});

If you do not want the element to be resized smaller later on, you can also add something like that in your stop event:

,
stop: function()
{
    $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10));
}