JQuery resizable () dynamic maxWidth parameter

Question

I have 3 columns that resize. When someone becomes wider, the one that is left to him decreases. Essentially just 2 pens. Left col and Mid col. Therefore, when Mid col becomes thinner, Right col expands accordingly. All three of them are contained with a parent div of 900px, so the sum of all three is always 900. They have maximum static and maximum width.

My problem is that if you take the left descriptor and move it to the right, you can still use the right descriptor and expand the middle of col beyond the edge of the parent div.

I thought of a way to solve this problem by writing a function that checks the width of the columns and then subtracts the left and right columns from the parent width of the div, I called it mWid. This leaves me with the number I want to set as maxWidth for Mid col.

Now the problem is that mWid is not updated to load here "maxWidth: mWid"

Here's what the function for the right handle looks like:

$(function() { $("#midResizable").resizable({ handles: 'e', containment: '#container', maxWidth: mWid, // gets set once, but doesn't update! WHY? minWidth: 195, resize: function(event, ui) { contWidth = $('#container').width() newWidth = $(this).width() leftWidth = $('#leftResizable').width() rightWidth = $('#rightResizable').width() $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px"); checkWid() } }); }); function checkWid() { rightWidth = $('#rightResizable').width() leftWidth = $('#leftResizable').width() contWidth = $('#container').width() mWid = (contWidth-15)-(rightWidth)-(leftWidth) } 

Answer 1

Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth

It looks like maxWidth: mWid, only called in init.

After that, you must explicitly specify maxWidth, for example:

 $( "#midResizable" ).resizable( "option", "maxWidth", mWid );