How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?


Tags: javascript,jquery,html,css,table

Problem :

I've successfully created 3 view boxes using an html table. Each view can be hidden. Now I'd like to have each views width and height to be resizable, pretty much exactly like how its done in JSFiddle where each code editing box can be resized. I found a jQuery widget but it only allow for the columns to be resized and not the boxes. I also found this but it was not implemented with a table http://www.bootply.com/RwnUXIcLap . Here's what I have so far https://jsfiddle.net/3waurzbf/ .

var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');

console.log(inputs);
console.log(tds);
var changeView = function () {

  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if(tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }

  if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';

  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';

};

changeView();


//$("#views-table").colResizable({liveDrag:true});
html {
  height: 100%;
}

body {
  height: 100%;
}

table {
  width: 100%;
  height: 90%;
}

table td {
  text-align: center;
  border: 1px solid black;
}

#views-container {
  height: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>View 1</td>

    <td>View 2</td>
  </tr>

  <tr>
    <td colspan="2">View 3</td>
  </tr>
</table>
<div id="views-container">
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 1</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 2</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 3</label>
</div>



Solution :

You can use jQuery UI .resizable(), although it's a bit tricky with table display and requires a little extra code.

Check out this working fiddle: https://jsfiddle.net/18k3umpp/3/

I've added a couple ids to View 1 and View 2:

<tr>
    <td id="v1">View 1</td>

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

Then try this:

$(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)
    });

});

Of course you can adjust the minWidth,maxWidth, and maxHeight options to whatever your needs are.


    CSS Howto..

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    How to remove blue underline on text in Chrome - CSS?

    How to center 2 or more divs on the same line? (css)

    How to place an image and text under it, side by side using HTML and css?

    How to make this loading animation?

    How to have proper spacing between items in the navbar regardless of word size?

    In Ember how to use a view to change a css property and then view it?

    How do I isolate floated content?

    How to write css for that?

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    How to show ellipsis for long cell values in kendo ui grid?

    How to scroll the fixed content in CSS and HTML

    Android stock browser: How to prevent double tap closing browser

    How do I prevent text from flowing onto different sections of a page?

    How to arrange divs by css floats?

    How to unhecked parent checkbox

    How to achieve the same background image effect made in other stack communities?

    How to set focus/active on the clicked li(tab) in angular.js

    How to loop animated text banners using css keyframes

    How do I provide navigation options on the sides of a centered logo?

    How to prevent a closing tag from being removed?

    how to code different type of border in css?

    How to implement easeOutBack easing in css transform animation

    How to inherit from ancestor and not parent in CSS?

    How to add a css to a view in the Controler?

    How to generate image sprites in ember-cli using compass?

    How to make JqueryUi Slider vertical-align middle?

    How to make one div's height depended of another div's height?

    How do I conditionally apply CSS styles in AngularJS?

    How to structure CSS classes? By entities or by aspects?