Me pregunto cómo js fiddle está manejando sus áreas de texto relacionadas con el cambio de tamaño y su layot ​​

Question

Me pregunto cómo el sitio jsfiddle.net está manejando sus áreas de texto. Cuando cambias el tamaño de uno, los otros se encogen/ganan tamaño. He intentado hacerlo regularmente con CSS, pero cuando cambio el tamaño de uno, el otro textarea aparece debajo del primer textarea. Algo como esto.

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

por lo que la otra textarea baja. El | son los lados de las páginas de inicio y las [] son ​​las áreas de texto.

Answer 1

Como puedo ver con el inspector de Chrome, primero se separan en dos columnas, con la posición: absoluta. El de la izquierda con un conjunto de propiedades css "izquierda" y el de la derecha con un conjunto de propiedades css "derecha".

Luego, cada columna tiene dos filas, que usan el mismo método, al revés (con las propiedades css superior e inferior establecidas).

Luego ingresa javascript. Cuando se tira de la palanca, se cambia la altura o el ancho de cada columna o fila de parejas para obtener la misma suma.

EDIT: Aquí puede ver algunos javascript de jsfiddle.

onDrag_horizontal cambia el tamaño de dos filas de una columna. Se toma la posición de la h mango (var top = (h.getPosition(this.content).y + h.getHeight()/2)/this.content.getHeight() * 100;) y a continuación, establece la altura de las dos filas en consecuencia

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 hace lo mismo, pero con el asa vertical, que cambia el tamaño de las dos columnas

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); 

Answer 2

Creo que puedo resolverlo ahora con su ayuda, estaba usando la posición relativa y debería haber estado usando absoluta para que el área de texto no salte. Estoy usando la interfaz de usuario de tamaño variable de jQuery porque parece onresize en javascript básico no se aplica a otros elementos, solo a la ventana.

Básicamente hacer que el área de texto de tamaño variable a la izquierda y añadir al evento 'redimensionar' que cada vez es de tamaño variable, las dimensiones de las otras áreas de texto cambian como,

$('#rightBox').css('width', totalsize + (ui.originalSize.width - ui.size.width)); 
$('#rightBox').css('height', totalsize + (ui.originalSize.height- ui.size.height));