Panels like JSFiddle

Question

I have this,

I want,

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/

I found this already, but it's not asynchronous - http://layout.jquery-dev.com/demos/nested.html — Mathematics, Aug 17 '15 at 07:16
or maybe something like this, but using heights instead of widths http://jsfiddle.net/QkZL8/15/ — Mathematics, Aug 17 '15 at 07:35
I also tried positioning with z-index but it just doesn't work and keeps showing first-body under second-body -- http://jsfiddle.net/j2JU6/1438/ — Mathematics, Aug 17 '15 at 07:54
I ended up using jQuery drag-able instead, i will try to add an answer in future — Mathematics, Aug 19 '15 at 06:33

score 2 · Answer 1 · edited May 05 '17 at 05:36

$('#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.

J Santosh · Answer 2 · 2015-08-17T10:28:59.807

1

try this below line

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

instead of

<div id="first">

edited Aug 17 '15 at 10:28

answered Aug 17 '15 at 10:21

J Santosh

3,808
2
22
43

score 1 · Accepted Answer · edited May 05 '17 at 05:24

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");
    }
});

not working exactly as expected but this is the nearest answer to question, so you will enjoy bounty. — Mathematics, Aug 22 '15 at 08:25

score 1 · Answer 4 · edited May 23 '17 at 12:26

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;
}

score 1 · Answer 5 · edited Jun 20 '20 at 09:12

I came across a plugin that looks very promising: http://nathancahill.github.io/Split.js/

Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes.

No dependencies or markup required, just two or more elements with a common parent.

Views can be split horizontally or vertically, with draggable gutters inserted between every two elements.

There is even a JS Fiddle-style Demo.

Sample JS (from demo):

Split(['#a', '#b'], {
   gutterSize: 8,
   cursor: 'col-resize'
})

Split(['#c', '#d'], {
   direction: 'vertical',
   sizes: [25, 75],
   gutterSize: 8,
   cursor: 'row-resize'
})

Split(['#e', '#f'], {
   direction: 'vertical',
   sizes: [25, 75],
   gutterSize: 8,
   cursor: 'row-resize'
})

Sample html usage (from demo):

<div id="a" class="split split-horizontal">
   <div id="c" class="split content"></div>
   <div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
   <div id="e" class="split content"></div>
   <div id="f" class="split content"></div>
</div>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/15015091) — bpeterson76, Jan 27 '17 at 00:20
@bpeterson76, how do you recommend referencing a plug in? If the link later becomes invalid, that (probably) also means the plug-in is invalid... suggestions, please? — user2441511, Jan 27 '17 at 14:22

Panels like JSFiddle

5 Answers5

Live Examples

Explanation

Relevant JavaScript

Relevant CSS