asked on

Grouping scripts that works well in separate webpages

Hi Experts,

Here is my first script:
<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;
if(w>ttbl.offsetWidth*.8) w=tbl.offsetWidth*.8;
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>

Here is the second part to include with the first code:
<script>
var thePanel;
var sX, sY;

function drag(e, theBar){
thePanel = theBar.parentNode;
while(thePanel.nodeName!="DIV"){
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePanel.offsetLeft);
sY = e.clientY-parseInt(thePanel.offsetTop);
document.onmousemove=move;
}
function drop(){
thePanel = null;
}
function move(e){
if(thePanel){
if(!e) e= event;
thePanel.style.left = e.clientX-sX;
thePanel.style.top = e.clientY-sY;
}
}
</script>

<div id="PanelForm" nowrap="nowrap" style="background-color:#C0C0FF;height:130px;width:600px;Z-INDEX: 106; LEFT: 88px; POSITION: absolute; TOP: 416px">

<TABLE id="TablePanelForm" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0"
border="1">
<TR>
<TD id="cell1" style="WIDTH: 100%; HEIGHT: 1%; cursor: hand;" bgColor="aliceblue"
onMouseDown="drag(event, this)" onMouseUp="drop()"></TD>
<TD style="HEIGHT: 1%" vAlign="top" align="right"><INPUT type="button" value="Button"></TD>
</TR>
<TR>
<TD colSpan="2"></TD>
</TR>
</TABLE>

</div>

Thanks in advance for helping me to group those code in an unique webpage.

darksinclair

Are you asking that you want us to pull out which functions would work well with other webpages and pull them into a separate webpage that you could include on both for better functionality / Design?

Or are you asking us to optimize this code ...?

noulouk

ASKER

darksinclair, those 2 codes works in separate pages as you can see.
Code 1: a table with a divider
Code 2: a layer that can move
I want the table and the layer in the same webpage.

Hope you understand what I want.

_aaron_

Here you go:

<html>
<head>
<script language='javascript'>

bResize = false;
c1 = ""
c2 = ""
ttbl = ""
tmid = ""

function init()
{
c1 = document.getElementById('f1');
c2 = document.getElementById('f2');
ttbl = document.getElementById('tbl');
tmid = document.getElementById('mid');
document.onmousemove = resize;
document.onmouseup = up;
}

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;
if(w>ttbl.offsetWidth*.8) w=tbl.offsetWidth*.8;
c1.style.width=w;
return false;
}
function up(){
bResize = false;
document.forms[0].__SPLITTERLOC.value =c1.style.width;
c1.className='normal'
c2.className='normal';
}

var thePanel;
var sX, sY;

function drag(e, theBar){
thePanel = theBar.parentNode;
while(thePanel.nodeName!="DIV"){
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePanel.offsetLeft);
sY = e.clientY-parseInt(thePanel.offsetTop);
document.onmousemove=move;
}
function drop(){
thePanel = null;
}
function move(e){
if(thePanel){
if(!e) e= event;
thePanel.style.left = e.clientX-sX;
thePanel.style.top = e.clientY-sY;
}
}

</script>
</head>
<body onload=init()>
<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>

<div id="PanelForm" nowrap="nowrap" style="background-color:#C0C0FF;height:130px;width:600px;Z-INDEX: 106; LEFT: 88px; POSITION: absolute; TOP: 416px">

<TABLE id="TablePanelForm" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0"
border="1">
<TR>
<TD id="cell1" style="WIDTH: 100%; HEIGHT: 1%; cursor: hand;" bgColor="aliceblue"
onMouseDown="drag(event, this)" onMouseUp="drop()"></TD>
<TD style="HEIGHT: 1%" vAlign="top" align="right"><INPUT type="button" value="Button"></TD>
</TR>
<TR>
<TD colSpan="2"></TD>
</TR>
</TABLE>

</div>

</body>
</html>

_aaron_

I used the init function so that the script didn't have to occur after the creation of the page elements ( very difficult to maintain otherwise + can get rather messy )... Pretty cool table slider - though having multiple id's with the same name is a bit of a concern -- but it works so obviously the browser(s) dont mind this too much ;-)

-- Aaron

noulouk

ASKER

Thanks Aaron, but I have a little problem.
The slider moves when you don't move the layer.
When I move the layer, then the slider doesn't move after.

ASKER CERTIFIED SOLUTION

_aaron_

membership

This solution is only available to members.

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

Start Free Trial