TD TR resize

by fekkyDev s

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
  <table>
    <tr>
      <td id="v1">View 1</td>

      <td id="v2">View 2</td>
    </tr>

    <tr>
      <td colspan="2">View 3</td>
    </tr>
  </table>
  
</body>

CSS

html {
      height: 100%;
    }
    
    body {
      height: 100%;
    }
    
    table {
      width: 100%;
      height: 90%;
    }
    
    table td {
      text-align: center;
      border: 1px solid black;
    }
    
    #views-container {
      height: 10%;
    }

JavaScript

$(window).on("load resize", function() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var v1Width = $("#v1").width()


  $("#v1").resizable({
    minWidth: 50,
    maxWidth: windowWidth - 80,
    maxHeight: windowHeight * (.83),
    handles: "e, s"
  }).on("resize", function() {

    if (v1Width == $("#v1").width()) {
      $("#v2").height(0)
    }
    v1Width = $("#v1").width()
  });

  $("#v2").resizable({
    maxHeight: windowHeight * (.83),
    handles: "s"
  }).on("resize", function() {
    $("#v1").height(0)
  });

});