How to adjust the size of multiple adjacent textareas like in jsfiddle.net?

How can I adjust the size of textarea by draging the mouse on areas 1, 2 and 3, just like the jsfiddle.net website?

My code is:

HTML:

<div id="content">
    <fieldset id="LeftPanel">
        <div id="div_A" class="window top">
            A
        </div>
        <div id="div_left" class="handler_horizontal"></div>
        <div id="div_B" class="window bottom">
            B
        </div>
    </fieldset>
    <div id="div_vertical" class="handler_vertical"></div>
    <fieldset id="RightPanel">
        <div id="div_C" class="window top">
            C
        </div>
        <div id="div_right" class="handler_horizontal"></div>
        <div id="div_D" class="window bottom">
            D
        </div>
    </fieldset>
</div>

JS:

$(function () {
    window.onresize = resize;
    resize();
});

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height();//20=body padding:10px
    $("#content").css({ "min-height": h - divHight + "px" });
    $("#div_vertical").css({ "height": h - divHight + "px" });
    $("#LeftPanel").css({ "height": h - divHight + "px" });
    $("#RightPanel").css({
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

CSS:

body {
    background: none repeat scroll 0 0 #EFEFEF;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 10px;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset{
    border: 0 none;
}
#LeftPanel
{
    width: 50%;
    float: left;
}
#RightPanel
{
    width: 50%;
    float: right;
}
.handler_vertical {
    cursor: col-resize;
    width: 8px;
    float: left;
}
.handler_horizontal {
    cursor: row-resize;
    height: 8px;
    width: 100%;
    float: left;
}
.window {
    border: 1px solid #ADADAD;
    width: 100%;
    float: left;
}
.top {
    height: 25%;
}
.bottom {
    height: 75%;
}

You can also get the code from:http://jsfiddle.net/xBjnY/

Koray S.

Can you please check this solution: http://jsfiddle.net/xBjnY/9/

$(function() {
    window.onresize = resize;
    resize();
});

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height(); //20=body padding:10px
    $("#content").css({
        "min-height": h - divHight + "px"
    });
    $("#div_vertical").css({
        "height": h - divHight + "px"
    });
    $("#LeftPanel").css({
        "height": h - divHight + "px"
    });
    $("#RightPanel").css({
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

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_vertical', "v");
jQuery.resizable('div_right', "h");
jQuery.resizable('div_left', "h");

Is it what you are looking for? Does it help?

You need to write some hardcore JavaScript code. ;) On mousedown event you store mouse position and in setTimeout (or setInterval) you check current mouse position (for example like once evey 16 miliseconds to get ~60FPS so it looks good). Then you evaluate the difference between starting mouse position and current mouse position and update the css/width/height.

来源：https://stackoverflow.com/questions/8819328/how-to-adjust-the-size-of-multiple-adjacent-textareas-like-in-jsfiddle-net

标签

javascript

jquery

resize

jsfiddle