faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

48 of 61 people (79%) answered Yes
Recently 9 of 10 people (90%) answered Yes

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>