I have a bunch of NS4 Layers, inside each layer is a form with a few fields. If the Layer is initialized as visible and kept visible everything is OK.
AS soon as I hide a layer, and then make it visible again, certain element types become unFocusable.
Radio, Checkbox and Form Buttons all lose interactivity and become disabled.
Does anyone have a work-around for this? I have also tried setting the initial clip to 0,0,0,0 and then upsizing the clip region, but that didn't seem to work either.
You can view it at
Enter a numeric Value greater than 18 in the 1st Field and a Capital 'M' in the secod.
The Netscape events fire on Blur, so take focus off the field to see a demo.
If you view it in IE or NS6, you will se how it is supposed to work.
Any help/insight is GREATLY Appreciatted.
Code Below.
- Jason
jwithrow@mediaone.net
*************** Source Code *********************
AS soon as I hide a layer, and then make it visible again, certain element types become unFocusable.
Radio, Checkbox and Form Buttons all lose interactivity and become disabled.
Does anyone have a work-around for this? I have also tried setting the initial clip to 0,0,0,0 and then upsizing the clip region, but that didn't seem to work either.
You can view it at
Enter a numeric Value greater than 18 in the 1st Field and a Capital 'M' in the secod.
The Netscape events fire on Blur, so take focus off the field to see a demo.
If you view it in IE or NS6, you will se how it is supposed to work.
Any help/insight is GREATLY Appreciatted.
Code Below.
- Jason
jwithrow@mediaone.net
*************** Source Code *********************
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE TYPE="Text/CSS">
input {
font: Tahoma;
font-size: 12px;
font-weight: bold;
color: red;
}
select {
font: Tahoma;
font-size: 12px;
font-weight: bold;
color: red;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function enableAll(doc) {
for(f=0;f<doc.document.forms[0].elements.length;f++) {
alert(doc.document.forms[0].elements[f].enabled);
doc.document.forms[0].elements[f].enabled = true;
alert(doc.document.forms[0].elements[f].enabled);
}
}
var NS4 = document.layers;
var bDOM = document.getElementsByTagName;
var IE4 = document.all;
var UA = navigator.userAgent;
//alert('NS4');
// IE 5 has a duplicate variable DOM Bug
// NS6 Does Not, So they treat document.all differently in our situation.
if (UA.indexOf('Netscape6') != -1) {
var NS6 = true;
} else {
var NS6 = false;
}
if (NS6) {
document.all = document.getElementsByTagName('*');
}
function keyEvent(obj, e, arg) {
if (NS4) {
obj.onBlur(arg)
}
}
function getFormVals() {
if (NS4) {
for(i=0;i<document.layers.length;i++) {
for (j=0;j<document.layers[i].document.forms[0].elements.length;j++) {
var oFieldName = document.layers[i].document.forms[0].elements[j];
alert(oFieldName.value + ' ' + oFieldName.type);
}
}
} else {
// DOM-1 Browsers
for (i=0;i<document.forms.length;i++) {
for (j=0;j<document.forms[i].elements.length;j++) {
var oFieldName = document.forms[i].elements[j];
alert(oFieldName.name + ' : ' + oFieldName.value + ' - ' + oFieldName.type);
}
}
}
}
// Object to Hold Field Info
function FieldParms(intNum, name, val, dependency, condition, constraint) {
this.order = intNum // Root\Non-Root Comparator (0=Root [Not inside a Layer], 1=Field In Layer)
this.name = name // FormField & Layer (Name OR ID)
this.val = val // FormField initial value
this.dependency = dependency // Dependency Layer (Name OR ID), 0 = Null
this.condition = condition // Condition To Evaluate, 0 = Null
this.constraint = constraint // Constraint To Evaluate, 0 = Null
}
// Array Of FieldParm Objects
var arrObj = new Array()
arrObj['Text1'] = new FieldParms(1, 'Text1', 'Text1 Value', 'Text2', 'Text1.value > 13', 1)
arrObj['Text2'] = new FieldParms(2, 'Text2', 'Text2 Value', 'Text3', 'Text2.value == "M"', 1)
arrObj['Text3'] = new FieldParms(2, 'Text3', '', '', '', 1)
function ParseLayers(refName, blnSubmit) {
sMyCondition = arrObj[refName].condition;
if (NS4) {
//alert(eval('window.document.' + refName + '.document.forms[0]'));
if ((sMyCondition == '') || ( eval('document.' + refName + '.document.forms[0].' + sMyCondition))) {
show(refName);
} else {
hide(refName);
}
} else {
var oField = findField(refName);
if (eval('oField.' + sMyCondition)) {
show(refName);
} else {
hide(refName);
}
}
}
function findField(sField) {
for (i=0;i<document.forms.length;i++) {
if (eval('document.forms[' + i + '].' + sField)) {
return (document.forms[i]);
}
}
}
function show(sLayer) {
sMyCondition = arrObj[sLayer].condition;
sChildLayer = arrObj[sLayer].dependency;
if (NS4) {
while (sChildLayer != '') {
alert('child: ' + sChildLayer);
if ((sMyCondition=='')||( eval('document.' + sLayer + '.document.forms[0].' + sMyCondition))) {
window.document[sChildLayer].visibility='show';
//window.document[sChildLayer].clip.top=-300;
//window.document[sChildLayer].clip.bottom=-300;
//window.document[sChildLayer].clip.left=-300;
//window.document[sChildLayer].clip.right=-300;
window.document[sChildLayer].moveTo(0,0);
var oDom = document[sChildLayer];
var oParent = document[sLayer];
} else {
document[sChildLayer].visibility='hide';
}
sLayer = sChildLayer
sMyCondition = arrObj[sLayer].condition;
sChildLayer = arrObj[sLayer].dependency;
}
} else {
// IE4+, NS6
while (sChildLayer != '') {
var oField = findField(sLayer);
if (eval('oField.' + sMyCondition)) {
//alert('Condition: ' + sMyCondition + ' = True');
var oDom = document.all[sChildLayer];
var oParent = document.all[sLayer];
//alert('oDOM: ' + oDom.id + ' ' + oDom.style.visibility);
if (!NS6) {
oDom = oDom[0];
oParent = oParent[0];
}
//getPosition(oParent, oDom);
oDom.style.visibility = 'visible';
}
sLayer = sChildLayer
sMyCondition = arrObj[sLayer].condition;
sChildLayer = arrObj[sLayer].dependency;
}
}
getPosition(oParent, oDom);
}
function getPosition(oPosParent, oMyPos) {
//alert(oPosParent.style.pixelTop);
if (IE4) {
var pTop = oPosParent.style.pixelTop;
var pLeft = oPosParent.style.pixelLeft;
oMyPos.style.pixelLeft = (30);
oMyPos.style.pixelTop = (pTop-18);
} else {
//NS Events
var pTop = oPosParent.top;
var pLeft = oPosParent.left;
//alert('Top: ' + pTop + '/nLeft: ' + pLeft);
oMyPos.moveTo(0, pTop - 50);
//oMyPos.clip.left = (0);
//oMyPos.clip.top = (0);
}
}
function hide(sLayer) {
sLayer = arrObj[sLayer].dependency;
if (NS4) {
while (sLayer != '') {
//alert(sLayer);
document[sLayer].visibility='hide';
sLayer = arrObj[sLayer].dependency;
}
} else { //IE4+, NS6
while (sLayer != '') {
var oDom = document.all[sLayer]
if (!NS6) { // Handle IE DOM Variable Bug
oDom = oDom[0];
}
oDom.style.visibility = 'hidden';
sLayer = arrObj[sLayer].dependency;
}
}
}
</SCRIPT>
</head>
<body ID="docBody">
<FORM NAME="mainForm">
</FORM>
<DIV id="Text1" name="Text1" style="position: relative; visibility:show; height:4px;">
<FORM>
<Input type="Text" Name="Text1" ID="Text1" onBlur="ParseLayers(this.name)">
</FORM>
</DIV>
<DIV id="Text2" name="Text2" style="position: relative; visibility:hide;">
<FORM Action="" NAME="f1">
<Input type="Text" Name="Text2" ID="Text2" onBlur="ParseLayers(this.name)">
Summer:<Input type="CHECKBOX" Name="tmpCHK" value="Summer" onClick="alert(this.name);">
<INPUT TYPE="Button" VALUE="Check" zIndex="1" onClick="alert('Clicked');"><BR>
Winter:<Input type="CHECKBOX" Name="tmpCHK" VALUE="Winter" onClick="alert(this.name);"><BR>
</FORM>
</DIV>
<DIV id="Text3" name="Text3" style="position: relative; visibility:hide;">
<FORM NAME="F3" Action="">
<SELECT NAME="Text3">
<OPTION VALUE="Lush">Lush</OPTION>
<OPTION VALUE="Lush">Muffs</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="tmpText" VALUE="TEMP VALUE"><BR>
CAT: <INPUT TYPE="RADIO" NAME="tmpRadio" VALUE="CAT"><BR>
DOG: <INPUT TYPE="RADIO" NAME="tmpRadio" VALUE="DOG" CHECKED><BR>
</FORM>
</DIV>
<P> </P>
<P> </P>
<P> </P>
<FORM>
<INPUT TYPE=Button ID=btnSubmit Name=btnSubmit VAlue="Submit" onClick="getFormVals()">
</FORM>
</body>
</html>
should avoid of using reserved words for any of your purposal..