possible to constrain jQuery resize to x or y axis, like drag constrain?

Question

This jQuery lets you constrain drag movement so it occurs only on the axis specified:

$("#draggable2").draggable({ axis: 'x' });

See: http://jqueryui.com/demos/draggable/#constrain-movement

This is not legal jQuery but I wish it were:

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } });

Is it possible to prevent the user from making #Container wider while allowing her to make it taller?

Thanks

Answer 1

I see two ways for you to do this, one better than the other. The best one first:

1) Set minWidth and maxWidth to the same value (namely the value you want the width to remain).

$('#theThing').resizable({ minWidth = 200, maxWidth = 200 });

2) Create a parent element with fixed width and make that the containment. I don't know how this will work on the height, but by default a div with no height specified grows if its content does, so it might work.

Answer 2

Yes, it's possible by using UI events. Along the x-axis:

$("#Container").resizable({
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    }
});

or along the y-axis:

$("#Container").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});