Разделение на две части экрана и изменение размера

[kein]

Встала задача:
Приложение занимает весь экран(скролинга быть не должно), и окно делится на две части нижнюю и верхнюю, и так же надо что бы была возможность менять высоту каждой из частей (наводишь на границу а там стрелочка), как это можно организовать? Такое с вертикальными областями есть в пхпмайадмин, но мне хочется без использования фреймов, и без кучи яваскрипта.
Возможно ли решить проблему при таких условиях?

 

[trueW3C]

Куча JS это сколько??? 15-20 строк?

 

[kein]

Столько сойдет) Я не хочу испльзовать сторонние библиотеки, требуется чистый JS. Без джиквери и др.

 

[trueW3C]

Вы хотите чтобы вам сейчас выложили готовое решение? Могу только дать ссылки и сказать как сделать

Граница это абсолютно спозиционированный DIV. С помощью JS делает его перетаскивание(только по оси Y, ось X не трогаем). Статьи по теме:
http://javascript.ru/ui/draganddrop
http://fastcoder.org/articles/?aid=149

Находим размер клиентской части браузера
http://fastcoder.org/articles/?aid=20

Считаем размер 2 DIV'ов(частей экрана)... тут простая математика...

Hпервого блока = Yграницы + Hграницы / 2
Hвторого блока = Hбраузера - Hпервого блока

H - высота, height
Y - отступ сверху, top

 

[kein]

Конечно верстку я не люблю но думаю с этим справлюсь)))) Спасибо за ссылки)

 

[trueW3C]

window.onload = function()
{
	function getMousePosition() { ... } //Координаты мышы
	function setBlocksSize(element_top) { ... } // Устанавливает высоты дивов
	
	var elementMove = false;
	var element = document.getElementById('elem'); //Граница
	
	element.onmousedown = function()
	{
		elementMove = true;
	}
	window.onmousemove = function()
	{
		if(!elementMove) return;
		
		var mousePos = getMousePosition();
		element.style.top = mousePos.y + 'px';
		
		setBlocksSize(mousePos.y);
	}
	window.onmouseup = function()
	{
		elementMove = false;
	}
}