Drag Re-sizable 2 column layout

css, jquery, jquery-ui

Solution

The plugin doesn't support it by default, so I made a start for you to achieve the goal. I just hard coded the div's into the function for the `resize event`, it's up to you to make it dynamic ;).

var total_width = 500;

$("#div1").resizable({
    grid: [1, 10000]
}).bind( "resize", resize_other);


function resize_other(event, ui) {
    var width = $("#div1").width();

    if(width > total_width) {
        width = total_width;

        $('#div1').css('width', width);
    }

    $('#div2').css('width', (total_width - width));
}​

Fiddle example

Hope this helps!

Problem

I just tried to create a Drag re-sizable layout with jQuery ui http://jsfiddle.net/3zLRJ/ But my actual aim was something like this Is it possible to make it with jQuery Ui method ?, or any other plugins available

Original source