Форум

DjKoff · #1 (**permalink**) 22.06.2011, 13:06

Здравствуйте!

у меня есть примерно такая конструкция:

<div id="wr">
	<div class="d1">cont1</div>
	<div class="hr"></div>
	<div class="d2"></div>
</div>

<style type="text/css">
.d1
	{
	width:100%;
	min-width:1001px;
	height:300px;
	overflow:auto;
	}

.hr
	{
	width:100%;
	height:3px;
	background:#e6e6e6;
	cursor:n-resize;
	}

.d2
	{
	width:100%;
	min-width:1001px;
	height:300px;
	}
</style>

нужно сделать так, чтоб при зажатии div hr он вертикально перемещался тем самым изменяя горизонтальный размер в пользу дива d1 или d2, примерно как frame (но не он) или как это делается в чатах/играх. использовать готовые плагины не очень хочется (хочу использовать ajax), а сам как-то не додумываюсь как сделать. подскажите пожалуйста как сделать или хотя бы статью на эту тему.

ksa · #2 (**permalink**) 22.06.2011, 14:06

Сообщение от DjKoff

изменяя горизонтальный размер в пользу дива d1 или d2

Эо не совсем понятно...

Сообщение от DjKoff

нужно сделать так ...

И кто в этом встал преградой?

DjKoff · #3 (**permalink**) 24.06.2011, 22:17

Цитата:

Эо не совсем понятно...

ну.. не знаю даже как объяснить. представте браузерную игру, есть основной контент и чат, так вот, можно чат полностью разворачивать и тогда поле с игрой уменьшится и можно так же делать наоборот. примерно как изменение размера в фреймах.

Цитата:

И кто в этом встал преградой?

никто, лишь моё незнание. я и прошу совета.

`p r o x y · #4 (**permalink**) 25.06.2011, 01:31

пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>glSBT Client site</title>
	<style type="text/css">
		.d1{
			width:100%;
			min-width:1001px;
			height:300px;
			overflow:auto;
			border: 1px solid #000;
		}

		.hr{
			width:100%;
			height:3px;
			background:#e6e6e6;
			cursor:n-resize;
		}
		.d2{
			width:100%;
			min-width:1001px;
			height:300px;
		}
	</style>
</head>
<body>

<div id="wr">
	<div id="resizeBlock" class="d1">cont1</div>
	<div id="resizer" class="hr"></div>
	<div class="d2"></div>
</div>
</body>
</html>

(function(){ // анонимная функция
		var startResize = 0; // флаг, если 1 - то выполняется resize (только внутри анонимной фнукции)
		
		document.onmousemove = function(e){ // обработчик mouse move на весь документе, если startResize == 1 то выполняется resize
			if (startResize){
				var mousePos = getMousePos(e);
				document.getElementById('resizeBlock').style.height = mousePos.y+'px';
			}
		}
		
		document.getElementById('resizer').onmousedown = function(){// обработчик mouse down на div "HR"
			document.getElementsByTagName('BODY')[0].style.cursor = 'n-resize'; // установка курсора resize на все BODY
			document.onmouseup = function(){// обработчик mouse up на весь документе для остановки resize
				startResize = 0;
				document.getElementsByTagName('BODY')[0].style.cursor = 'default';
			}
			startResize = 1;
		}
		
		// функция получения координат курсора мышки по событию
		function getMousePos(e){
			var x = 0, y = 0;
			if (!e) e = window.event;
			
			if (e.pageX || e.pageY){
				x = e.pageX;
				y = e.pageY;
			}else if (e.clientX || e.clientY){
				x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
				y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
			}
			
			return {'x':x, 'y':y};
		}
	})();

`p r o x y · #5 (**permalink**) 25.06.2011, 01:34

> div hr он вертикально перемещался тем самым изменяя горизонтальный размер

Это фраза взрывает мозг XD

DjKoff · #6 (**permalink**) 26.06.2011, 21:42

`p r o x y,
спасибо большое за пример, и прости, что взорвал тебе мозг ;DD

da_ff · #7 (**permalink**) 28.06.2011, 11:02

Цитата:

нужно сделать так, чтоб при зажатии div hr он вертикально перемещался тем самым изменяя горизонтальный размер в пользу дива d1 или d2, примерно как frame (но не он) или как это делается в чатах/играх. использовать готовые плагины не очень хочется (хочу использовать ajax)

Вам видимо нужен был slider между двумя блоками. Боюсь, ajax вам для этого не потребуется вообще.

Форум

Справочник

Discord чат

Курсы javascript