JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div>
    <div class="button">Resize Me</div>
    <article></article>
    <footer></footer>
</div>

CSS

.button {
    background-color:#333;
    border-color:#333;
    color:#fff;
    position:absolute;
    top:200px;
    left:50px;
    height:50px;
    width:150px;
    text-align:center;
    line-height:inherit;
    z-index:1;
}
article {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:300px;
    background-color:#ccc;
}
footer {
    position:absolute;
    top:300px;
    left:0;
    width:100%;
    height:100px;
    background-color:red;
}

JavaScript

$(function () {
	
    $('.button').resizable({
        create: function (e, ui) {
            var footer_current_top, body_current_height, object_current_height;
        },
        start: function (e, ui) {
            footer_current_top = parseInt($('footer').css('top'));
            body_current_height = parseInt($('article').css('height'));
            object_current_height = parseInt(ui.size.height);
            //console.log('start: ',ui);
        },
        stop: function (e, ui) {
            footer_current_top = parseInt($('footer').css('top'));
            body_current_height = parseInt($('article').css('height'));
            object_current_height = parseInt(ui.size.height);
            //console.log('stop: ',ui);
        },
        resize: function (e, ui) {
            var handle = $(this).data('ui-resizable').axis;
            if (handle === 's') {

                if (parseInt(ui.position.top + ui.size.height) > footer_current_top) {

                   //console.log('body H: ' + body_current_height + '; obj H: ' + object_current_height + '; obj new H: ' + ui.size.height);
                    footer_current_top++;
                   // $('article').css('height',(body_current_height+1)+'px');
                    $('footer').css('top',(footer_current_top+1)+'px');

                }

            }
        }
    });

});