jQuery resizable() dynamic maxWidth option

I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.

My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.

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

Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"

Here is 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)
}

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

Looks like maxWidth: mWid, only gets called on init.

The maxWidth needs to be explicitly set after that, like this:

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

you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.

$('.droppedBtn').resizable({

  .... //you resizable properties

  start: function(event,ui)
  {

    $( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
    $( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);

  },

  stop: function(event,ui){

  }

});