jQuery resizable plugin, to resize only height

How to make alsoResize option to on开发者_JAVA技巧ly work for height but not for both width and height?

Actually if you set maxWidth to a limit, we cannot resize the width more than it.

For example,

$( ".selector" ).resizable({ maxWidth: 250 }); //For initialzation 

will not allow the resize to occur more that 250px in width

If you check this demo http://jqueryui.com/demos/resizable/#max-min, you will notice the width resizing being limited to a point.

So in your case set the initial width of the .selector and maxWidth same and it is done.

For further information go to http://jqueryui.com/demos/resizable/#option-maxWidth

I'm assuming that your base element that is resizable, can be resized in both the x & y axis. Using the alsoResize option will apply the same changes to the matching elements. I suggested you do not use the alsoResize option, but use the resize event handlers to apply the changes manually.

Just go to the plugin code and put this:

if (this.className == 'YOUR_ELEM_CLASS_OR_ID_NAME_HERE') css = ['height'];

right after this:

_alsoResize = function (exp, c) {
            $(exp).each(function() {
                var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, 
                    css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];