Question

I want re-sizable feature like jsFiddle : link. If i explain in my own words there are four layouts
[1. HTML, 2. javascript, 3. CSS & 4.Result] and we can re-size the layout inwards & outwards. I have been tried to make resizable using jQuery but failed to do like jsFiddle.

    my example:  CSS 
 #parent { position:relative; width 100%; height:100%;}
    #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
    #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }

    <div id = "parent"> 
      <div class="resize" id = "left"> </div>
      <div class="resize" id = "right"> </div>
    </div>
    js: $(function() { $('.resize').resizable(    { handlers: 'n,e,s,w' }    ); 
    });

in example, there are two layout left & right, are equals in size. when i resize any div then other div should change it’s size too but it doesn’t make any difference in size while jsFiddle does.

Answer 1

Add the jQuery css in your code and it will be working fine.
add this line:

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">

**Editing**:: Use this one: It will work for left div. try this :)

 /*my example:  CSS */
 #parent { position:relative; width 100%; height:100%;}
 #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
 #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }

/*my example:  JS */
jQuery(function() { 

    jQuery('#left').resizable({  
                                resize: function(event, ui) {
                                            var leftWidth = ( 100 * parseFloat($('#left').css('width')) /   parseFloat($('#left').parent().css('width')) );
                                            var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
                                            jQuery('#right').css('width', rigthWidth + '%');
                                        }
                            });
});

<div id = "parent"> 
  <div class="resize" id = "left"> </div>
  <div class="resize" id = "right"> </div>
</div>