I am wondering how js fiddle is handling their textareas concerning resizing and their layot

Question

I wonder how the site jsfiddle.net is handling their textareas. When you resize one, the others shrink/gain size. I've been trying to do it regularly with css but when I resize one, the other textarea pops under the first textarea. Something like this.

|[   ][   ]|
resize work....
|[     ]   |
[]

so the other textarea goes down. The | are ment to be the sides of the homepages and the [] are the textareas.

Answer 1

As I can see with Chrome inspector, they are first separated in two columns, with position:absolute. The one on the left with a "left" css property set, and the one on the right with a "right" css property set.

Then each columns have two rows, that use the same method, the other way around (with top and bottom css properties set).

Then javascript comes in. When the handle is dragged, each column or row couple's height or width are changed to give the same sum.

EDIT : Here you can see some javascript from jsfiddle.

onDrag_horizontal resizes two rows of a column. It takes the position of the handle h (var top = (h.getPosition(this.content).y + h.getHeight() / 2) / this.content.getHeight() * 100;) and then sets the height of the two rows accordingly

var onDrag_horizontal = function(h) {
    var windows = h.getParent().getElements('.window');
    var top = (h.getPosition(this.content).y + h.getHeight() / 2) / this.content.getHeight() * 100;
    windows[0].setStyle('height', top + '%');
    windows[1].setStyle('height', 100 - top + '%');
}.bind(this);

onDrag_vertical does the same thing, but with the vertical handle, which resizes the two columns

var onDrag_vertical = function(h) {
    var left = (h.getPosition(this.content).x + h.getWidth() / 2) / this.content.getWidth() * 100;
    this.columns[0].setStyle('width', left + '%');
    this.columns[1].setStyle('width', 100 - left + '%');
}.bind(this);