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

jquery resize axis constraints
Tim picture Tim · May 12, 2010 · Viewed 13.4k times · Source

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

daveagp picture daveagp · Jan 24, 2012

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.

Related questions

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
How to resize images proportionally / keeping the aspect ratio?

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio. Can someone point me to some code, or explain the …

Read More
Using jQuery To Get Size of Viewport

How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin). For …

Read More