Re-sizing a div should re-size other div's proportionately

Question

I have pasted my JS code, CSS and HTML respectively below.

 var hgt=0,newhgt=0,bsh=0,diff=0; $('#footS').resizable({ alsoResize:"#footC", handles:"n", start: function(event,ui){ oldhgt = ui.size.height; bsh = $('#bodyS').height(); }, resize:function(event,ui){ diff = oldhgt - ui.size.height; if(diff<0) newhgt = bsh - Math.abs(diff); else newhgt = bsh + diff; $('#bodyS').height(newhgt); }, stop:function(event,ui){ newhgt = bsh - Math.abs(oldhgt - ui.size.height); $('#bodyS').css("height",newhgt+"px"); $('#bodyC').css("height",newhgt+"px"); $('#footS').css("height",ui.size.height+"px"); } }); 

 #vscale,#canvas { height: auto; width: auto; /* border: 1px solid gray; */ margin-left: 5px; float: left; position:absolute; } #canvas{ margin-left:100px; } .scale { height:150px; width:50px; border: 1px dotted gray; } #headS,#headC{border-color: red;min-height:50px;} #bodyS,#bodyC{border-color: blue;min-height:50px;} #footS,#footC{border-color: green; min-height:50px;} .ui-resizable-helper { border: 1px dotted #999; } .fscale{top:0.0px;position:relative;} .cont{ border: 1px dotted gray; height:150px; width:auto; } 

 <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="vscale" style="top:75px;"> <div id="headS" class="scale">HScale</div> <div id="bodyS" class="scale">BScale</div> <div id="footS" class="scale fscale">FScale</div> </div> <div id="canvas" style="width:300px;top:75px;"> <div id="headC" class="cont">HeadContainer</div> <div id="bodyC" class="cont">BodyContainer</div> <div id="footC" class="cont">FootContainer</div> </div> 

The problem is when I re-size the north handle of the #footS div I am unable to change the height of #bodyS div and #bodyC div while re-sizing and also when re-size stops. I also need to decrease the top of the #footC div as I am re-sizing the #footS div dynamically. Any sort of help would be helpful.

Answer 1

Below is the logic i wrote to get the re-size working for #bodyC and #bodyS accordingly.

 var oldFSH=0,newBSH,oldBSH=0,diff; $('#footS').resizable({ ghost:true, handles:"n", start: function(event,ui){ oldFSH = $('#footS').height(); oldBSH = $('#bodyS').height(); newBSH=diff=0; }, resize:function(event,ui){ var newFSH = ui.size.height; diff = oldFSH > newFSH?oldFSH - newFSH:newFSH - oldFSH; newBSH = oldFSH > newFSH?oldBSH+diff:oldBSH-diff; $('#bodyS,#bodyC').height(newBSH); }, stop:function(event,ui){ var newFSH = ui.size.height; $('#bodyS,#bodyC').css("height",newBSH+"px"); $('#footC').css("height",newFSH + "px"); $("#footS").css("top","0px"); } }); 

 #vscale,#canvas { height: auto; width: auto; /* border: 1px solid gray; */ margin-left: 5px; float: left; /*Here you can also use display: inline-block instead of float:left*/ position:absolute; } #canvas{ margin-left:100px; } .scalecont { height:144px; border: 1px dotted gray; } .bodycss{ height:200px; border: 1px dotted blue; } #footS{top:0px;position:relative;} #headC,#bodyC,#footC{width:auto;} .ui-resizable-helper { border: 1px dotted #999; } 

 <div id="vscale" style="top:100px;"> <div id="headS" class="scalecont">HScale</div> <div id="bodyS" class="bodycss">BScale</div> <div id="footS" class="scalecont">FScale</div> </div> <div id="canvas" style="width:300px;top:100px;"> <div id="headC" class="scalecont">HeadContainer</div> <div id="bodyC" class="bodycss">BodyContainer</div> <div id="footC" class="scalecont">FootContainer</div> </div> 

And, also I added an option called "ghost:true" to the jquery resizable widget.