Getting height and width when resizing two divs at the same time

In this code I will be share with you how to get the height and width when resizing two div at the same time

 
<!doctype html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
  <style>
   html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}


/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
 
}

#panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
    width: 50%;
 
  white-space: nowrap;
 background-color:red;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;  
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ffd400;
  min-height: 200px;
  cursor: col-resize;  
}

#panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  
  background: #3ff3;
}
  </style>

</head>
<body>
  <div>
  <span id="widthinfo1"></span><span style="float:right" id="widthinfo"></span>
   </div>
   <br>
 <div class="panel-container">

   <div id="panel-left"></div>
<div class="splitter" onmousemove="widthdevice()"></div>
<div id="panel-right"></div>
        </div> 
  
<script>
 $("#panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

 
</script>
<script>
function widthdevice() {
  

  var wid = document.getElementById("panel-right").offsetWidth;
  var hei = document.getElementById("panel-right").offsetHeight;
  var wid1 = document.getElementById("panel-left").offsetWidth;
  var hei1 = document.getElementById("panel-left").offsetHeight;
  
  var coor = "panel-right= <span >"+ wid + " x "+ hei +" (px)</span>";
  document.getElementById("widthinfo").innerHTML = coor;
  
   var coor1 = "panel-left= <span >"+ wid1 + " x "+ hei1 +" (px)</span>";
  document.getElementById("widthinfo1").innerHTML = coor1;
}

</script>
</body>
</html>

Getting height and width when resizing two divs at the same time

☷✎

Getting height and width when resizing two divs at the same time

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

JSON LD code generator - json ld product

How-to display text on hover with CSS style (Tooltips)

blogger meta description generator