Resizable

by salitrapraveen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div id="content">
<div id="topDiv">
    This is top div element.
</div>
    <div id="bottomDiv">
    This is bottom div element.
</div>
</div>

CSS

#content {
    border: 2px solid black;
    widht: 300px;
    height: 416px;
    margin: 4px;
}

#topDiv {
    widht: 100%px;
    height: 200px;    
    border: 2px solid blue;        }

#bottomDiv {
    widht: 100%px;
    height: 200px;    
    border-top: 8px solid #eee;    
    border-left: 2px solid red;    
    border-right: 2px solid red;    
    border-bottom: 2px solid red;        
}

JavaScript

$(function() {

$('#topDiv').resizable({
     minHeight: 20,
     maxHeight: 300,
      handles: 's',
     resize: function(event, ui) { 
        
        $('#bottomDiv').css('top', ($('#topDiv').height())+'px');
        $('#bottomDiv').css('height', ($('#content').height()-$('#topDiv').height()-14)+'px'); 
     }    
});




});