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

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

Answer 2

Both of these answers work, but they have the unfortunate consequence of showing a <-> cursor over the eastern border, making the user think they might be able to resize the width. What I think is a better match is to call this on the jQuery object:

.resizable({handles:'s'})

since this will simply remove the possibility of changing the width, and the cursor.