Horizontal splitter with jQuery UI Resizable

by Andy Kuds

HTML

<div class="container">
    <div class="resizable resizable-top">
        <p>
            Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic
            Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic Text ipsen orlic
    </div>
    <div class="resizable resizable-bottom">
        <p>
            In the beginning God created the heavens and the earth. 2 Now the earth was formless and empty, darkness was over the surface of the deep, and the Spirit of God was hovering over the waters.
        </p>
    </div>
</div>

CSS

.container {
    border: 1px brown solid;
    width: 300px;
}

.resizable {
    overflow: hidden;
}

.resizable-top {
    background-color: coral;
}

.resizable-bottom {
    background-color: lightblue;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 16px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

JavaScript

//Couldn't find an example of horizontal splitter, only vertical, so made mine. 
$(function() {
    var bottomElem = $(".resizable-bottom");
    var bottomElemOriginalHeight = bottomElem.height();
    $(".resizable-top").resizable({
        handles: 's',
        resize: function(event, ui) {
            bottomElem.height(bottomElemOriginalHeight - (ui.element.outerHeight() - ui.originalSize.height));

        },
        stop: function(event, ui) {
            bottomElemOriginalHeight = bottomElem.height();
        },
        //This has the effect of minHeight for bottomElem
        maxHeight: $(".resizable-top").height()

    });
});