Is it possible to limit jQuery resizing for the x or y axis, for example, to limit stretching?

Question

This jQuery allows you to restrain the drag movement so that it only happens on the specified axis:

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

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

This is not legal jQuery, but I would like to:

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

Is it possible to prevent the user from making # the container wider, allowing it to make it higher?

thanks

Answer 1

Yes, this is possible using user interface events. 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 displaying the cursor ↔ over the eastern border, causing the user to think that they can change the width. I find it better to combine this with a jQuery object:

  .resizable ({handles: 's'}) 

as this will simply remove the ability to change the width and cursor.

Answer 3

I found that just cleaning the height or width of the inline style on the object when resizing also works. It also has an additional advantage: it is not related to the original dimensions of the object (since they can vary depending on the contents)

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

Answer 4

I see two ways to do this, one better than the other. Best 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 a fixed width and make it a protection. I do not know how this will work at height, but by default a div , if no height is specified, increases, so it can work.