Resizing DIV Panel

Question

I am working on a website project and I need to add a resizable panel like jsfiddle or hotmail (hotmail has a left panel that includes your mails, and has a right content panel that you can read your mails...)

I looked at jQuery and I tried so many times but I can't set the handler. I just need to make a panel that can be resizable horizontally.

So how can I make this? Can you help me to complete my code (need a resizer between the left_panel and content. Resizer will resize the left_panel and of course content will be effected.)

> http://jsfiddle.net/QkZL8

Answer 1

The fiddle doesn't work because jQuery UI isn't included (so jQuery UI resizable is not known), but also you made a syntax error, you should do this:

$(resize).resizable({
    handles: 'w'
});

not this:

$(resize).resizable({,,
    handles: 'w', 
});

As David remarks in the comments, you should make the panel itself resizable, not an in between splitter element. In the resize handler you can resize the other panel so its width is complementary to the width of the panel you are actually resizing.

UPDATE: This should put you on the right track:

$(resize).resizable({
    // only use the eastern handle
    handles: 'e',
    // restrict the width range
    minWidth: 120,
    maxWidth: 450,
    // resize handler updates the content panel width
    resize: function(event, ui){
        var currentWidth = ui.size.width;
      
        // this accounts for padding in the panels + 
        // borders, you could calculate this using jQuery
        var padding = 12; 
      
        // this accounts for some lag in the ui.size value, if you take this away 
        // you'll get some instable behaviour
        $(this).width(currentWidth);
      
        // set the content panel width
        $("#content").width(containerWidth - currentWidth - padding);            
    }
});

Update 2: I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.

UPDATED fiddle here