Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.
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:
<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 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('f
c2 = document.getElementById('f
ttbl = document.getElementById('t
tmid = document.getElementById('m
function resize(e){
if(!bResize) return false;
c1.className=c2.className=
if(!e) e=event;
var w=e.clientX-ttbl.offsetLef
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].__SPLITT
c1.className=c2.className=
}
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!="
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePane
sY = e.clientY-parseInt(thePane
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:#C
<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.
Here is my first script:
<html>
<head>
</head>
<body>
<form>
<input type=text name="__SPLITTERLOC">
<table style="width:300px;border:
<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 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('f
c2 = document.getElementById('f
ttbl = document.getElementById('t
tmid = document.getElementById('m
function resize(e){
if(!bResize) return false;
c1.className=c2.className=
if(!e) e=event;
var w=e.clientX-ttbl.offsetLef
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].__SPLITT
c1.className=c2.className=
}
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!="
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePane
sY = e.clientY-parseInt(thePane
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:#C
<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.
Asked:
-
3
-
2
1 Solution
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.
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.
Here you go:
<html>
<head>
<script language='javascript'>
bResize = false;
c1 = ""
c2 = ""
ttbl = ""
tmid = ""
function init()
{
c1 = document.getElementById('f
c2 = document.getElementById('f
ttbl = document.getElementById('t
tmid = document.getElementById('m
document.onmousemove = resize;
document.onmouseup = up;
}
function resize(e){
if(!bResize) return false;
c1.className=c2.className=
if(!e) e=event;
var w=e.clientX-ttbl.offsetLef
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].__SPLITT
c1.className='normal'
c2.className='normal';
}
var thePanel;
var sX, sY;
function drag(e, theBar){
thePanel = theBar.parentNode;
while(thePanel.nodeName!="
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePane
sY = e.clientY-parseInt(thePane
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:
<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 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:#C
<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>
<html>
<head>
<script language='javascript'>
bResize = false;
c1 = ""
c2 = ""
ttbl = ""
tmid = ""
function init()
{
c1 = document.getElementById('f
c2 = document.getElementById('f
ttbl = document.getElementById('t
tmid = document.getElementById('m
document.onmousemove = resize;
document.onmouseup = up;
}
function resize(e){
if(!bResize) return false;
c1.className=c2.className=
if(!e) e=event;
var w=e.clientX-ttbl.offsetLef
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].__SPLITT
c1.className='normal'
c2.className='normal';
}
var thePanel;
var sX, sY;
function drag(e, theBar){
thePanel = theBar.parentNode;
while(thePanel.nodeName!="
thePanel = thePanel.parentNode;
}
sX = e.clientX-parseInt(thePane
sY = e.clientY-parseInt(thePane
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:
<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 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:#C
<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>
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
-- Aaron
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.
The slider moves when you don't move the layer.
When I move the layer, then the slider doesn't move after.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.
Tackle projects and never again get stuck behind a technical roadblock.
Join Now
Or are you asking us to optimize this code ...?