Resizing divs within a user control
<p>I am new to jQuery but it seems to be the best tool for the job I am attempting to accomplish. I have two content divs stacked on top of each other separated by another div styled into a handle which is meant to be draggable up and down. The handle should resize the content divs above and below the it. The same functionality as that found <a href="http://jsfiddle.net/xBjnY/9/" rel="nofollow">At this jsFiddle demo</a>... minus the right panels (c and d). </p>

<p>However my project varies as I am attempting to place this functionality within a user control that inserted in a page derived from a master page. </p>

<p>The user control is simple enough</p>

<pre><code>&lt;fieldset id="LeftPanel" style="width: 100%; height: 100%"&gt;
    &lt;div style="width: 100%; height:50%; overflow-y:auto; overflow-x:hidden; border: 1px solid red"&gt;
        &lt;div id="htmlQuestion" class="window top" runat="server"&gt;
            Question Content Div
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="div_left" class="handler_horizontal"&gt;&lt;/div&gt;

    &lt;div style="width: 100%; height:50%; overflow-y:auto; overflow-x:hidden; border: 1px solid green"&gt;
        &lt;div id="htmlAnswer" class="window bottom" runat="server"&gt;
            Answer Content Div
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/fieldset&gt;
</code></pre>

<p>I have a function to resize this control to that of its containing control which is working as intended.</p>

<pre><code>&lt;script type="text/javascript"&gt;
window.onresize = ResizeControl;

function ResizeControl() {

    var contentContainer = $('#' + ContentContainerID());

    var containerHeight = contentContainer.height();
    var containerWidth = contentContainer.width();

    containerHeight -= 50;
    containerWidth -= 40;
        $("#LeftPanel").css({ "height": containerHeight + "px" });
        $("#LeftPanel").css({ "width": containerWidth + "px" });

};
</code></pre>

<p></p>

<p>Now this is where I need some help. I need to make the function below, taken from the jsFiddle example work within this user control alone. But I am unsure where to start. 
So far I have attempted to bind the mouse down function to the fieldset:LeftPanel and to both divs but in all implementations I get no movement from drag handle. Can someone please point me in the right direction for this. </p>

<pre><code>    jQuery.resizable = function (resizerID, vOrH) {
    jQuery('#' + resizerID).bind("mousedown", function (e) {
        var start = e.pageY;
        if (vOrH == 'v') start = e.pageX;
        jQuery('body').bind("mouseup", function () {
            jQuery('body').unbind("mousemove");
            jQuery('body').unbind("mouseup");

        });
        jQuery('body').bind("mousemove", function (e) {
            var end = e.pageY;
            if (vOrH == 'v') end = e.pageX;
            if (vOrH == 'h') {
                jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height() + (end - start));
                jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height() - (end - start));
            }
            else {
                jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width() + (end - start));
                jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width() - (end - start));
            }
            start = end;
        });
    });
}

jQuery.resizable('div_left', "h");
</code></pre>
