The is a two part problem, part 1.
I have a (primary) DIV tag that contains a FORM inside which I have among other things checkboxes - an unspecified number. Their name attribute is the same for all. Their value is set from a DB via VbScript.
I have another (secondary) DIV tab that's empty untill you check any of the C/Bs in the FORM. When that happes a this secondary DIV populates with a checkbox having same attributes as the one from the FORM.
If you uncheck any C/B in the secondary DIV the div goes away and the C/B in the prmary will get unchecked. So far I have this coded and it works sometimes.
Part 2:
I also want to achieve somewhat of a opposite effect. If you uncheck any checked C/B in the primary DIV, I want the corresponding C/B in the secindary DIV to be removed.
The code below works for part 1 - mostly. If you check the C/Bs in the primary DIV, the secondary DIV is populated fine. If you uncheck the C/Bs in the secondary, they are removed and the correspoding C?Bs in the primary DIV are unchecked. If you repeat this, on the second iteration it does not work.
Can some please look at this and provide feedback. Thank you!
EJM
<%@ language="vbscript" %>
<% option explicit %>
<% response.buffer = true %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Test
</title>
<script type="text/javascript">
<!-- ///////////////////////////////////////////////////////////////////// -->
var FloatLayers = new Array();
var FloatLayersByName = new Array();
function addFloatLayer(n,offX,offY,spd){new FloatLayer(n,offX,offY,spd);}
function getFloatLayer(n){return FloatLayersByName[n];}
function alignFloatLayers(){for(var i=0;i<FloatLayers.length;i++)FloatLayers[i].align();}
function getXCoord(el) {
x=0;
while(el){
x+=el.offsetLeft;
el=el.offsetParent;
}
return x;
}
function getYCoord(el) {
y=0;
while(el){
y+=el.offsetTop;
el=el.offsetParent;
}
return y;
}
<!-- /// PLACE IN INCLUDE FILE ////////////////////////////////////////////////////////////////// -->
FloatLayer.prototype.setFloatToTop=setTopFloater;
FloatLayer.prototype.setFloatToBottom=setBottomFloater;
FloatLayer.prototype.setFloatToLeft=setLeftFloater;
FloatLayer.prototype.setFloatToRight=setRightFloater;
FloatLayer.prototype.initialize=defineFloater;
FloatLayer.prototype.adjust=adjustFloater;
FloatLayer.prototype.align=alignFloater;
function FloatLayer(n, offX, offY, spd) {
this.index=FloatLayers.length;
FloatLayers.push(this);
FloatLayersByName[n] = this;
this.name = n;
this.floatX = 0;
this.floatY = 0;
this.tm = null;
this.steps = spd;
this.alignHorizontal= rightFloater;
//this.alignHorizontal=(offX>=0) ? leftFloater : rightFloater;
this.alignVertical =(offY>=0) ? topFloater : bottomFloater;
this.ifloatX = Math.abs(offX);
this.ifloatY = Math.abs(offY);
}
<!-- ///////////////////////////////////////////////////////////////////// -->
function defineFloater(){
this.layer = document.getElementById(this.name);
this.width = this.layer.offsetWidth;
this.height = this.layer.offsetHeight;
this.prevX = this.layer.offsetLeft;
this.prevY = this.layer.offsetTop;
}
function adjustFloater() {
this.tm=null;
if(this.layer.style.position!='absolute')return;
var dx = Math.abs(this.floatX-this.prevX);
var dy = Math.abs(this.floatY-this.prevY);
if (dx < this.steps/2)
cx = (dx>=1) ? 1 : 0;
else
cx = Math.round(dx/this.steps);
if (dy < this.steps/2)
cy = (dy>=1) ? 1 : 0;
else
cy = Math.round(dy/this.steps);
if (this.floatX > this.prevX)
this.prevX += cx;
else if (this.floatX < this.prevX)
this.prevX -= cx;
if (this.floatY > this.prevY)
this.prevY += cy;
else if (this.floatY < this.prevY)
this.prevY -= cy;
this.layer.style.left = this.prevX;
this.layer.style.top = this.prevY;
if (cx!=0||cy!=0){
if(this.tm==null)this.tm=setTimeout('FloatLayers['+this.index+'].adjust()',50);
}else
alignFloatLayers();
}
function setLeftFloater(){this.alignHorizontal=leftFloater;}
function setRightFloater(){this.alignHorizontal=rightFloater;}
function setTopFloater(){this.alignVertical=topFloater;}
function setBottomFloater(){this.alignVertical=bottomFloater;}
function leftFloater(){this.floatX = document.body.scrollLeft + this.ifloatX;}
function topFloater(){this.floatY = document.body.scrollTop + this.ifloatY;}
function rightFloater(){this.floatX = document.body.scrollLeft + document.body.clientWidth - this.ifloatX - this.width;}
function bottomFloater(){this.floatY = document.body.scrollTop + document.body.clientHeight - this.ifloatY - this.height;}
function alignFloater(){
if(this.layer==null)this.initialize();
this.alignHorizontal();
this.alignVertical();
if(this.prevX!=this.floatX || this.prevY!=this.floatY){
if(this.tm==null)this.tm=setTimeout('FloatLayers['+this.index+'].adjust()',10);
}
}
</script>
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<script type="text/javascript" language="javascript">
new FloatLayer('floatlayer',0,15,4);
function detach(){
lay=document.getElementById('floatlayer');
l=getXCoord(lay);
t=getYCoord(lay);
lay.style.position='absolute';
lay.style.top=t;
lay.style.left=l;
lay.style.width = 180;
lay.style.float = 'right';
getFloatLayer('floatlayer').initialize();
alignFloatLayers();
}
function removeElement(divNum) {
var d = document.getElementById('floatlayerinner');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
if(document.getElementById(divNum-1).checked == true){
document.getElementById(divNum-1).checked = false
}
}
function fillCart(co_id)
{
var checkIndicator = null;
var ni = document.getElementById('floatlayerinner');
var numi = document.getElementById(co_id);
var num = (document.getElementById(co_id).value -1)+ 2;
var coName = document.getElementById('CompanyName'+co_id).value;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = num;
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=\'checkbox\' onclick=\'removeElement('+divIdName+') checked \>' +coName;
ni.appendChild(newdiv);
}
</script>
</head>
<body onresize="alignFloatLayers()", onscroll="alignFloatLayers()";>
<table border="0" width="996" cellpadding="0" cellspacing="0" align="center">
<tr valign="top">
<td >
<div id="Div1">
<form name='frmPost' action='process.asp' method='post'>
<!-- The for loop is to simulate looping through a record set and as such I can have any number of records. -->
<%
dim i
for i = 0 to 6
%>
<table border='0' width='100%' cellpadding='6' cellspacing='0'>
<tr>
<td ><h3>Item <%=i%></h3><input type='hidden' value='Item <%=i%>' id='CompanyName<%=i%>' ></td>
</tr>
<tr>
<td>
<table border='0' width='100%' cellpadding='3' cellspacing='0'>
<tr>
<td width='1%'><input type='checkbox' onclick='detach(); fillCart(<%=i%>); ' name='co_id' id='<%=i%>' value='<%=i%>'></td>
<td width='99%'>Add to multi-request selections</td>
</tr>
</table>
</td>
</tr>
</table>
<%
next
%>
</div>
</td>
<td align="center" bgcolor="#FFFFFF">
<div id="floatlayer" style="width:180px;padding:0px">
<table border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="180">
<tr>
<td bgcolor="#FEFFEF" height="25" align="center" class="box-header">
Your Request List
</td>
</tr>
<tr>
<td bgcolor="#FEFFEF" style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
<div id="floatlayerinner" style="padding:5px;">
</div>
</td>
</tr>
<tr><td bgcolor="#FEFFEF" align="center" style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;">
<input type="submit" name="btnSCart" />
</td></tr>
</table></div>
<br />
</form>
</td>
</tr>
</table>
</body>
</html>