jQuery UI and Splitter

Question

Using jQuery UI, how can I use a Splitter kind of feature like the one at http://methvin.com/splitter/3csplitter.html?

I am asking this as I need 2 things to be implemented on my page; Portlet (Draggable) :: http://jqueryui.com/sortable/#portlets and Vertical Splitter :: http://methvin.com/splitter/3csplitter.html

I am not sure how good coding practice it is if I am including 2 separate libraries (even though both are jQuery based); like http://host.sonspring.com/portlets/ for Portlets and http://methvin.com/splitter/3csplitter.html for Splitter

Answer 1

Here is an example on how to create the splitter using jQuery UI:

HTML:

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

Script:

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});

This is a popular script. I've added little modifications for the fluid layout.

jsFiddle example

Answer 2

I used Dmitriy's answer as the base of my implementation. Note that there is nothing stopping that particular implementation from doubling the bounding box when the slider is dragged to the right.

I needed a simple non-moveable splitter for now (with the view to making the panes resizable in the future), and my application is already using jQuery, so I achieved this by changing part of his code as follows:

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: false,
        containment: "#wrap",
        ...

I also changed the css cursor style (among other things) to prevent the resizable cursor from being displayed as follows:

.ui-resizable-e { 
    cursor: default; 
    ...

Thanks Dmitriy!