Question

Code :

<div id="widget1">
  <div class="part blue">this is the part</div>
  <div class="part white">of the genial</div>
  <div class="part red">and good widget</div>
</div>

Let’s say that div#widget1 is 99px width and div.part are 33px by default.

How can I easily resize div.blue by increasing its width and deacreasing width of other div.part proportionnaly ?

http://jqueryui.com/demos/resizable/#synchronous-resize : give an example which show element increase in the same time.

Answer 1

possible duplicate of resizing div panel

Testing my solution here : http://jsfiddle.net/lnplnp/MxKLH/

But this do perfectly what I need :

JAVASCRIPT :

$(document).ready(function() {

  // init
  var containerWidth = $("#container").width();
  var nbpanels = $(".panel").size();
  var padding = 2.5;

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({
    handles: 'e',
    maxWidth: 450,
    minWidth: 120,
    resize: function(event, ui){
      var currentWidth = ui.size.width;
      // set the content panel width
      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );
      $(this).width(currentWidth);
    }
  });

});

HTML :

<div id="container">
  <div id="panel1" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel2" class="panel" >
    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel3" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel4" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div class="clear"></div>
</div>

CSS :

.clear{
  clear:both;
}

#container{
  border: 1px red solid;
  margin: 0 auto;
  width: 900px;
}

.panel{
  background-color: #9999FF;
  float: left;
  height: 200px;
  padding: 2.5px;
}

#panel1{
  background-color: #FF0000;
}

I think the JS can be improve… but it’s working !