jQuery UI Resizable custom Demo

by Adi Jaya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- 
support touchscreen 
https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js
-->

<div class="wrapper-area" id="wrapper">

    <div id="top-area">
        <!-- nav -->
        <h3>
        Hello
        </h3>
        <div class="divnav">
            <button>Hello</button>
             <button>Hello</button>
              <button>Hello</button>
               <button>Hello</button>
        </div>
        <!-- custom handles bottom posittion -->
        <div class="ui-resizable-handle ui-resizable-s" id="handle-bottom-custom"></div>
    </div>
    
    <article id="content">
        <!-- content -->
    </article>
    
</div>

CSS

body {
    margin: 0;
}

.wrapper-area {
    position: relative;
    height: 100vh;
}

#top-area {
    position: absolute;
    left: 0;
    right: 0;
    background: #3350ef;
    height: 50px;
    overflow: hidden;
}

#content {
    background: #ffffa3;
    height: 100%;
}

#handle-bottom-custom {
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: black;
    left: 49%;
    bottom: 0;
    cursor: s-resize;
}
.divnav {
}

JavaScript

$(function () {

	function normalWidthResizable(){
    	var parentWidth = $( "#wrapper" ).width();
		$( "#top-area" ).css({
			"width" : parentWidth+"px"
		});
	}
	
    
	$( "#top-area" ).resizable({
		containment: "parent",
		maxHeight: 300,
		minHeight: 50,
		handles: { 
			s: '#handle-bottom-custom'
		},
		stop: function() {
			normalWidthResizable();

        }
	});
    
    $( window ).on( "resize", function(){
    	normalWidthResizable();
    })
    

});