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.

Sorry, I'm not sure what you're trying to accomplish. I ran it in JSFiddle to visualize what's happening and I still don't know. (also, that's jQuery) — JackHasaKeyboard, Mar 31 '16 at 18:47
When i drag the north handle from #footS upwards: I need to change height of #FootC,#bodyC and #bodyS dynamically during resize happens and set them when resize stops. — TheGaME, Mar 31 '16 at 18:55
I believe you're looking for something called a table, it would handle the logic of what you're trying to accomplish. Tables are a grid that consists of elements called "cells" that are restricted to having even heights and widths. Think of Microsoft Excel. Here it is exemplified: https://jsfiddle.net/5jp06gn2/, see how the tables' column and rows and all the elements they contain are automatically refitted? — JackHasaKeyboard, Mar 31 '16 at 22:43
I am trying to implement something similar to what Microsoft word ruler does. When you re-size the footer scale you will notice the height of the body adjusts accordingly. Thanks for your idea too. — TheGaME, Mar 31 '16 at 23:59

score 0 · Answer 1 · answered Apr 01 '16 at 15:25

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.

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

1 Answers1