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

This jQuery lets you constrain drag movement so it occ开发者_运维技巧urs 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

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

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.

I found that just clearing on the height or width inline style on the object on resize also works. It also has the added benefit of not being bound to the object's original dimensions (since those could change based on the contents)

$("#Container").resizable({
    resize: function(event, ui) {
        $(this).css('height','');
    }
});

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.