asked on

Divider that can move

Hi Experts,

Here is the code of my divider:

<html>
<head>
</head>
<body>
<form>
<input type=text name="__SPLITTERLOC">
<table style="width:300px;border:1px solid #000000;position:relative;" cellspacing="0" cellpadding="0" id="tbl">
<tr >
<td id="f1">test data</td>
<td width="6" rowspan="11" height="100%" id="mid"
style="cursor:w-resize;" bgColor="black"
onmousedown="bResize=true;"> </td>
<td id="f2">more test data</td>
</tr>
<tr>
<td id="f1">test data</td>
<td id="f2">more test data</td>
</tr>
<tr>
<td id="f1">test data</td>
<td id="f2">more test data</td>
</tr>
</table>
</form>
<script language='javascript'>
bResize = false;
c1 = document.getElementById('f1');
c2 = document.getElementById('f2');
ttbl = document.getElementById('tbl');
tmid = document.getElementById('mid');
function resize(e){
if(!bResize) return false;
c1.className=c2.className='highlighted';
if(!e) e=event;
var w=e.clientX-ttbl.offsetLeft-5;
if(w<ttbl.offsetWidth*.2) w=tbl.offsetWidth*.2;
c1.style.width=w;
return false;
}
function up(){
bResize = false;
document.forms[0].__SPLITTERLOC.value =c1.style.width;
c1.className=c2.className='normal';
}
document.onmousemove = resize;
document.onmouseup = up;
</script>
</body>
</html>

I want my table to be resized when the user moves the divider on the right side (table grows when divider moves on the right, reduces when divider moves on the left, but I want the control inside cell right to be always visible).

Thanks in advance for your answers.

cwolves

take the "width:300px" out of the table style and put "width:150px" (or whatever you want) in the first two td cells.

noulouk

ASKER

OK, but the divider stop moving to the right side when "table width = 100%".
This was my real trouble: I want my user to be able to move the divider to the right as far as he wants instead of being limited to the window.

cwolves

use my original code :-) (whatever I posted a few days ago)

ASKER CERTIFIED SOLUTION

cwolves

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial