Drag Re-sizable 2 column layout

Question

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

Answer 1

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!