CODEWITHSUNDEEP
javascriptjquerycss
Farzaneh Talebi
Farzaneh Talebi

Reputation: 915

How to resize two divs side by side like windows explorer

enter image description here

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.com/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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

Upvotes: 9

Views: 9132

Answers (3)

Just Born
Just Born

Reputation: 11

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.com/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.com/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.com

Upvotes: 0

Andimanos
Andimanos

Reputation: 127

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>

Upvotes: 3

gmrash
gmrash

Reputation: 670

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>

Upvotes: 0

Related Questions