Question

recently for a website I am working on I wanted to create a horizontal divider capable of resizing two elements on a page using jquery.

Basically:

Content

___Divider_____

Content

When: the divider is dragged, it should resize the “Content” elements either side of it to the users desired size.

Here is what i have so far.

<div id="WorkRequests"></div>
<div id="Divider" style="height:10px; padding:5px; cursor:n-resize;"><hr /></div>
<div id="WorkRequest_Ajax"></div>

And the script:

var totalHeight = $("#Divider").parent().height();
    function ResizePage(divPosition) {
        var validDrag = true;

        // Math
        var minPercent = totalHeight * 0.25;
        var minBuffer = totalHeight * 0.05;
        var topHeight = divPosition.top - $("#content").position().top;
        var bottomHeight = (totalHeight - divPosition.top);

        // Check Drag
        if (topHeight < minPercent) {
            validDrag = false;
            $("#WorkRequests").height(minPercent + minBuffer);
        }

        if (bottomHeight < minPercent) {
            validDrag = false;
            $("#WorkRequest_Ajax").height(minPercent + minBuffer);
        }

        // Set Heights
        if (validDrag) {
            $("#WorkRequests").height(topHeight);
            $("#WorkRequest_Ajax").height(bottomHeight);
        }

        return validDrag;
    }

    $("#Divider").draggable({ axis: "y", drag: function (event, ui) { return ResizePage($(this).position()); } });

However when I drag the divider it simply jumps around and locks at either extremity, I have tried many different calculations etc, but I am afraid I just simply do not understand the factors in resizing both elements.

So does anyone know a jquery plugin that will do this for me, or how i can fix my attempt?

Thanks,
Alex.

Answer 1

You may also checkout the UI.Layout jQuery plugin. Here’s a demo.