Panels like JSFiddle

Question

I have this,

I want,

Fiddle

When Seconds tab goes up, I want to decrease height of First Section with min First 2 showing always, same with Second section.

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var a = $('#first').css("height", b + "px");
        console.log(a.height());
    }
});

Edit

Must have -- I want it to work just like JSFiddle "HTML" and "JavaScript" panels, they both are resizable but also have min heights as you can see here

http://jsfiddle.net/

Answer 1

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    maxHeight: 300,
    minHeight: 150,
    resize: function (event, ui) {
        var h = ui.size.height;
        $('#first').height(400 -h);
    }
});

#main {
    width:100%;
    height:400px;
    overflow: hidden;
    position: relative;
}

#first, #second {
    height:200px;
    width: 100%;
    overflow-y: scroll;
}

#second {
    z-index:999;
    position: absolute;
}

#first-head, #second-head {
    background-color:red;
}

#ngrip {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    bottom: -5px;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div id="main">
  <div id="first">
    <div id="first-head">
      <h3>First</h3>
    </div>
    <div id="first-body">
      <p>First-1</p>
      <p>First-2</p>
      <p>First-3</p>
      <p>First-4</p>
      <p>First-5</p>
      <p>First-6</p>
    </div>
  </div>
  <div id='second'>
    <div id="second-head">
       <h3>Second</h3>
       <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    </div>
    <div id="second-body">
      <p>Second-1</p>
      <p>Second-2</p>
      <p>Second-3</p>
      <p>Second-4</p>
      <p>Second-5</p>
      <p>Second-6</p>
    </div>
  </div>
</div>

Use minHeight and minHeight option of JqueryUI combined with CSS display: absolute; for #second

First, change your resize direction in HTML (from ui-resizable-s to ui-resizable-n)

 <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>

Second, use JqueryUI options in Javascript:

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    maxHeight: 300,    // Example max height of `#second` is 300px
    minHeight: 100,    // Example min height of `#second` is 100px
    resize: function (event, ui) {
        // Get height of `#second`
        var h = ui.size.height;

        // Set height of `#first`          
        $('#first').height(400 - h);    //400 is height of container `#main`
    }
});

Final, change some CSS

#main {
    width:100%;
    height:400px;
    overflow: hidden;
    position: relative;
}

#first, #second {
    height:200px;
    width: 100%;
    overflow-y: scroll;
}

#second {
    z-index:999;
    position: absolute;
}

#first-head, #second-head {
    background-color:red;
}

#ngrip {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    bottom: -5px;
    left: 50%;
}

Hope it help you.

Answer 2

Please Check this demo JS Fiddle. It will useful for you.

HTML

<div id="main">
  <div id="first">
    <div id="first-head">
       <h3>First</h3>
    </div>
    <div id="first-body">
      <p>First-1</p>
        <p>First-2</p>
        <p>First-3</p>
        <p>First-4</p>
        <p>First-5</p>
        <p>First-6</p>
    </div>
  </div>
  <div id='second'>
    <div id="second-head">
       <h3>Second</h3>
       <div class="ui-resizable-handle ui-resizable-s" id="ngrip"></div>
    </div>
    <div id="second-body">
      <p>Second-1</p>
      <p>Second-2</p>
      <p>Second-3</p>
      <p>Second-4</p>
      <p>Second-5</p>
      <p>Second-6</p>
      <p>Second-7</p>
      <p>Second-8</p>
      <p>Second-9</p>
    </div>
  </div>
</div>

CSS

#main {
    width:100%;
    height:400px;
}
#first, #second {
    min-height:100px;
    height:170px;
    max-height:400px;
}
#second-body{
   z-index:9999;
}
#first-head, #second-head {
    background-color:red;
}
#first-body, #second-body {
    overflow-y:auto;
    height:100%;
     margin-bottom:10px;
}
#ngrip {
        position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    top:0px;
    left: 50%;
}

jQuery

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var height=$('#main').height();
        var a = $('#first').css("height", b + "px");
        var first=$('#first').height();
        $('#second').css("height",height- first+ "px");
    }
});

Answer 3

try this below line

<div id="first" style="min-height:35%;overflow:hidden">

instead of

<div id="first">

Answer 4

Live Examples

Minimal Example

Full Example

---

Explanation

Your second comment was close to all that's required.

The "key insight" is that, in order to constrain the minimum height of one element, it suffices to constrain the maximum height of the other. If the top element cannot be taller than 250, then the bottom element cannot be any smaller than 50 (to maintain a constant container height of 300).

Relevant JavaScript

// initialise dimensions
var containerHeight = $("#container").height();
var minHeight = containerHeight * 0.30; // min 30% height
var maxHeight = containerHeight - minHeight;

// call rebalance once on page load to make sure the panels start off right
rebalance()

$("#top").resizable({
      handles: 's',
      maxHeight: maxHeight,
      minHeight: minHeight,
      resize: rebalance // whenever we resize, rebalance the panels
});

function rebalance() {
    var currentTopHeight = $("#top").height();
    $("#bottom").height(containerHeight - currentTopHeight);    
}

I've also taken the liberty of cleaning up your code a little. I think you were having CSS problems related to filling the space after the header, and once that was fixed the resizing is fairly straightforward. I've annotated the CSS with comments to explain what's going on. You might also be interested in the discussion here: Make a div fill the height of the remaining screen space

Relevant CSS

/* both containers are full-width, and absolutely positioned in their parent */
#first, #second {
    position:absolute;
    width:100%;
}
/* pin the first to the top, and the second to the bottom */
#first {
    top:0;
}
#second {
    top:50%;
    bottom:0;
}

/* The body needs to leave space at the top for the header (25px) but none at the bottom */
#first-body, #second-body {
    overflow-y:auto;
    width:100%;
    position:absolute;
    top:25px;
    bottom:0;
}