JSFiddle - React, Tailwind, and code Playground

by dacrazycoder

HTML

<div id="container">
    <div id="one"></div>
    <div id="two">
        <div id="bezel"></div>
        <div id="content"></div>
    </div>
</div>

CSS

#container {position:absolute;top:10px;left:10px;height:300px;width:200px;border:1px solid black;}
#container div {position:absolute;}

#one {top:0px; height: 47%; width:100%; background-color:green;}
#two {height: 53%; bottom: 0px; width:100%;}
#bezel {top: 0px; height: 15px; width:100%; background-color: yellow;cursor:n-resize;}
#content {top: 15px; bottom:0px; height:auto; width:100%; background-color:red;}

JavaScript

function VerticalSizer(topElementId, bottomElementId, bezelElementId) {
    this.topPanel = document.getElementById(topElementId);
    this.bottomPanel = document.getElementById(bottomElementId);
    this.bezel = document.getElementById(bezelElementId);
    this.container = this.topPanel.parentElement;

    // Private Vars
    var sizer = this;
    var draggable = false;
    var minPercentHeight= 10;

    // Initialize 
    bezel.addEventListener('mousedown', function(e) {
        doMouseDown(e, sizer);
    }, false);

    bezel.addEventListener('dragstart', function(e) {
        e.preventDefault();
    }, false);

    window.addEventListener('mouseup', function(e) {
        doMouseUp(e, sizer);
    }, false);

    window.addEventListener('mousemove', function(e) {
        doMouseMove(e, sizer);
    }, true);

    // Event Handlers
    var doMouseDown = function onMouseDown(e, verticalSizer) {
        verticalSizer.setDraggable(true);
    };

    var doMouseUp = function onMouseUp(e, verticalSizer) {
        verticalSizer.setDraggable(false);
    };

    var doMouseMove = function onMouseMove(e, verticalSizer) {
        if (verticalSizer.isDraggable()) {
            var height = jQuery(verticalSizer.container).height();
            var min = verticalSizer.getMinHeight();

            /**
             * This tweening is designed to makeup for the top offset of the first element.
             * 11px = Top Offset in current container
             * Without this tween, the e.clientY offset will be incorrect in relation
             * to the NavTable Iframe coordinates in relation to the client window.
             */
            var tween = jQuery(verticalSizer.container).position().top;
            var tweenPercent = Math.floor((tween / height) * 100);

            var bottomHeight = height - e.clientY;
            var bottomPercentageHeight = Math.floor(((bottomHeight) / height) * 100) + tweenPercent;

            var topHeight = height - bottomHeight;
           ...