Link to home
Start Free TrialLog in
Avatar of skiboy825
skiboy825

asked on

resizing tables

I have created a page that allows the user to adjust the width of two adjacent tables by clicking and dragging a vertical separator. If the vertical separator is dragged to the left, the left table's width gets smaller and the right table's width gets larger. It works great except when the separator is dragged outside of either table.

For example...

Drag the separator all the way to the right
release mousebutton
drag separator more to the right
release mousebutton

Now, when you click on the vertical separator to move it to the left, the mouse pointer is not directly over it, but rather to its left.

Frames is not an option. How can I fix this? I will post the code below:

<html>
<head>
<title>Sliding Tables</title>
</head>

<body topmargin="0" leftmargin="0" onload="setevent()">

<script type="text/javascript">

var startpos, diffpos=0;
var permitted = false;

function Position(Event)
{
  if (!document.all)
  {
    startpos = Event.screenX + diffpos;
  }
  else
  {
    startpos = event.clientX + diffpos;
  }

  permitted = true;
  return false;
}

function Action(Event)
{
  permitted = false;
  return false;
}

function NewPos(Event)
{

  if (permitted)
  {
    if (!document.all)
    {
      new_position = Event.screenX;
    }
    else
    {
      new_position = event.clientX;

      diffpos = startpos-new_position;

      document.testform.test4.value = new_position;
      document.testform.test1.value = diffpos;
      document.testform.test2.value = document.getElementById("table1").style.width;
      document.testform.test3.value = document.getElementById("table3").style.width;

      if (diffpos <= 200 && diffpos >= -600)
      {
        document.getElementById("table1").style.width = 200 - diffpos + "px";
        document.getElementById("table2").style.width = "5px";
        document.getElementById("table3").style.width = 600 + diffpos + "px";
      }
      else
      {

        if (diffpos >= 200)
        {
          document.getElementById("table1").style.width = 200;
          document.getElementById("table2").style.width = 5;
          document.getElementById("table3").style.width = 600;
          //diffpos = 0;
          //new_position = 0;
          //startpos = 205;
        }
        else if (diffpos <= -600)
        {
          document.getElementById("table1").style.width = 600;
          document.getElementById("table2").style.width = 5;
          document.getElementById("table3").style.width = 200;
          //diffpos = 0;
          //new_position = 0;
          //startpos = 605;
        }

      }
    }
  }
}

function setevent()
{
  document.getElementById("table2").onmousedown = Position;
  document.onmouseup = Action;
  document.onmousemove = NewPos;
}

</script>

<table border='0' cellpadding='0' cellspacing='0' width='805'>
  <tr>
    <td width='200' bgcolor='#666666' height='300' id='table1' valign='top'>
      <div width='200'>
         qwerty<br>
         as jdkls adksal<br>
         asldlks ajda
      </div>

    </td>
    <td width='5'   bgcolor='yellow'  height='300' id='table2' onmouseover="style.cursor='e-resize'"></td>
    <td width='600' bgcolor='#CCCCCC' height='300' id='table3' valign='top'>

         qwerty<br>
         as jdkls adksal<br>
         asldlks ajda

    </td>
  </tr>
</table>

<form name=testform>
new position:
<input type=text name=test4>
   
diffpos:
<input type=text name=test1>
   
table1:
<input type=text name=test2>
   
table3:
<input type=text name=test3>
</form>

</body>
</html>

ASKER CERTIFIED SOLUTION
Avatar of cwolves
cwolves

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of skiboy825
skiboy825

ASKER

thanks! that worked perfectly.