Hi I must create a page that RightCol must be resizable like windows explorer window. The size of each column must equal to the height of the browser. By resizing the browser, these two column must be resized.

My code don't work correctly. could an one help me , please?

/**jquery :**/

$("#LeftCol").resizable({
  maxHeight: 250,
  maxWidth: 900,
  minHeight: 150,
  minWidth: 200
});

$('#LeftCol').resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
  $('#LeftCol').height($("#parent").height());
});

<link href=".12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
  position: relative;
  min-height: 300px;
  margin: 0;
  padding: 0;
  width: 100%;
}

#LeftCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 65%;
  background-color: #A2A;
  overflow:auto;
}

#RightCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 35%;
  background-color: #BBB;
  overflow:auto;
  max-height:300px;
}

<script src=".1.1/jquery.min.js"></script>
<script src=".12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

Hi I must create a page that RightCol must be resizable like windows explorer window. The size of each column must equal to the height of the browser. By resizing the browser, these two column must be resized.

My code don't work correctly. could an one help me , please?

/**jquery :**/

$("#LeftCol").resizable({
  maxHeight: 250,
  maxWidth: 900,
  minHeight: 150,
  minWidth: 200
});

$('#LeftCol').resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
  $('#LeftCol').height($("#parent").height());
});

<link href="https://code.jquery./ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
  position: relative;
  min-height: 300px;
  margin: 0;
  padding: 0;
  width: 100%;
}

#LeftCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 65%;
  background-color: #A2A;
  overflow:auto;
}

#RightCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 35%;
  background-color: #BBB;
  overflow:auto;
  max-height:300px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

• javascript
• jquery
• css

• what browsers does it need to work in? You might take a look at flex box if you don't need a high degree of backwards patibility. – thelastshadow Commented Nov 25, 2015 at 7:56
• modern browser , and ie9 . – Farzaneh Talebi Commented Nov 25, 2015 at 7:58
• jQuery IS NOT a language, or a standard. It's a library - a tool. Your "code" is written in JavaScript. – Amit Commented Nov 25, 2015 at 7:58
• Alas ie9 doesn't support flexbox. – thelastshadow Commented Nov 25, 2015 at 8:00
• if ie10 support it , i can ignor ie9. – Farzaneh Talebi Commented Nov 25, 2015 at 8:03

3 Answers 3

I would set one to be resizable and the other one to be a flexbox.

https://codepen.io/anon/pen/YjJBZm

I took one of the answers already given and tried it out in this pen. Some adjustments were made.

HTML

#parent {
  display: flex;
  border: 1px solid #000;
  height: 75vh;
  width: 100%;
}

#LeftCol {
  flex-grow: 1;
  border: 1px solid red;
  resize: horizontal;
  overflow: auto;
}

#RightCol {
  flex-grow: 3;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

Solution using pure css Flexbox Layout http://codepen.io/gmrash/pen/epaqva

#parent {
  display: flex;
  border: 1px solid #000;
  height: 100vh;
}

#LeftCol {
  flex-grow: 3;
  border: 1px solid red;
}

#RightCol {
  flex-grow: 1;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

I faced the same challenge and the most effective way to solve it was through the library Jquery UI. Here's how : As of right now, here are the CDN links (of course you can check online for the lastest link) :

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
  integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<script 
  src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" 
  integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" 
  crossorigin="anonymous" 
  referrerpolicy="no-referrer">
</script>

the 2 Divs :

    .resizable-container {
      display: flex;
    }

    .resizable, 
    .resizable2 {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 10px;
    }

<div class="resizable-container">
    <div class="resizable"> Div 1 Content</div>
    <div class="resizable2"> Div 2 Content</div>
</div>

And the js code :

    $(document).ready(function () {
  $(".resizable").resizable({
    handles: "e", // Permet le redimensionnement uniquement à partir du bord droit
    minWidth: 100, // Taille minimal!e
    resize: function (event, ui) {
      var parentWidth = $(this).parent().width();
      var resizable2Width = parentWidth - ui.size.width;
      $(".resizable2").width(resizable2Width);
    },
  });
});

the callback function is triggered while the user is resizing the div .resizable ; it dynamically ajusts the width of the div .resizable2 in the process.

For more info you can check the documentation at jqueryui.