Entry
How can I resize a DIV using a drag technique.
Jul 16th, 2003 07:45
Klaus Bolwin, MIlt Grinberg,
Let me try to explain what I am trying to do. I would like to have two
divs on a page with a "line" in between separating them. I would like
to pick the "line" and move it up or down modifying the heights of the
upper and lower div. The two divs divide the page into two pieces
which need to be resized by the user.
The following code works in MSIE and Gecko based browsers
(tested in MSIE 6 and Mozilla 1.4)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
.d1 {position:relative; top:0; width:100%; height:200px;
background-color:yellow; overflow:auto;}
.d2 {position:relative; top:0; width:100%; height:200px;
background-color:gray; overflow:auto;}
#hr {cursor:pointer;}
</style>
<script type="text/javascript">
var startpos, diffpos=0;
var erlaubt = false;
function Position(Ereignis)
{
if (!document.all)
startpos = Ereignis.screenY + diffpos;
else
startpos = event.clientY + diffpos;
erlaubt = true;
return false;
}
function Aktion(Ereignis)
{
erlaubt = false;
return false;
}
function NeuPos(Ereignis)
{
if (erlaubt)
{
if (!document.all)
jetztpos = Ereignis.screenY;
else
jetztpos = event.clientY;
diffpos = startpos-jetztpos;
if (diffpos > -200 && diffpos < 200)
{
document.getElementById("d1").style.height = 200 - diffpos + "px";
document.getElementById("d2").style.height = 200 + diffpos + "px";
}
}
}
function setevent()
{
document.getElementById("hr").onmousedown = Position;
document.onmouseup = Aktion;
document.onmousemove = NeuPos;
}
</script>
<head>
<title>zwei divs</title>
</head>
<body onload="setevent()">
<div class="d1" id="d1">
Dies ist div1<br />Zeile 2<br />Zeile 3<br />Zeile 4
</div>
<hr class="hr" id="hr" />
<div class="d2" id="d2">
Dies ist div1<br />Zeile 2<br />Zeile 3<br />Zeile 4
</div>
</body>
</html>
