вертикальное изменение размеров div'ов как frame'ов
Здравствуйте!
у меня есть примерно такая конструкция:
<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), а сам как-то не додумываюсь как сделать. подскажите пожалуйста как сделать или хотя бы статью на эту тему. |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
пример:
<!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};
}
})();
|
> div hr он вертикально перемещался тем самым изменяя горизонтальный размер
Это фраза взрывает мозг XD |
`p r o x y,
спасибо большое за пример, и прости, что взорвал тебе мозг ;DD |
Цитата:
|
| Часовой пояс GMT +3, время: 19:10. |