Welcome to WebmasterWorld Guest from 23.22.17.192

Forum Moderators: open

Message Too Old, No Replies

js and dhtml script to change forms in layers in NN

js, dhtml, dom, forms

   
11:24 am on May 7, 2003 (gmt 0)

10+ Year Member



I have a problem with adapt a simple IE JS script to a Netscape browsers.
If you please, help me...
with best ...
tomek
SCRIPT:

<html>
<head>

<script language="JavaScript">
nn4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function changeForm(form) {
var oSel = eval("form.kategorie");
var userSelection = oSel.options[oSel.selectedIndex].value;

switch (userSelection) {
case "war1" :
if (ie4) {
document.all.Warstwa2Label.style.display = "block";
form.warstwa2.style.display = "block";
document.all.Warstwa3Label.style.display = "block";
form.warstwa3.style.display = "block";
}
if (nn4) {

}
break;

default :
if (ie4) {
document.all.Warstwa2Label.style.display = "none"
form.warstwa2.style.display = "none"
document.all.Warstwa3Label.style.display = "none";
form.warstwa3.style.display = "none";
}
if (nn4) {

}
break;
}
return;
}

</script>
</head>

<body>
<form id="dhtmlForm" action="plik.php" method="post">

<select size="1" id="kategorie" onchange="changeForm(this.form);">
<option name="default" value="default">opcja 0
<option name="warstwa 1" value="war1">opcja 1
<option name="warstwa 2" value="war2">opcja 2
</select>

<br>Opis1<br>
<input type="text" name="cena" size="7" class="input" style="width: 60px;">

<div id="Warstwa2Label" style="display:none;">Opis2
<input name="warstwa2" id="warstwa2_id" type="text" size="7" class="input" style="display:none; width: 60px;">
</div>

<div id="Warstwa3Label" style="display:none;">Opis3
<input name="warstwa3" id="warstwa3_id" type="text" size="7" class="input" style="display:none; width: 60px;">
</div>

</form>
</body>
</html>

11:30 am on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld, tommo!

I've only taken a very brief glance at your code, but have you tried using the style.visibility='visible' and style.visibility='hidden'?

You may have more success with this....

6:15 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The previous poster's suggestion about modifying the visibility property is a good one, especially if you need to support NS4. I was interested in this kind of code for another purpose, so I checked Eric Meyer's handy CSS compatibility chart and discovered (not surprisingly) that NS4's support of the "display" property is listed as partial/buggy, but it does handle visibility just fine. Another complication I see is that the code posted here does not account for Netscape v6.x and higher (or many other standards-compliant browsers). So I'd suggest code along the following lines (BE SURE TO SEE THE WARNINGS BELOW!):

<script type="text/javascript" language="JavaScript">
nn4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function changeForm(form) {
var oSel = eval("form.kategorie");
var userSelection = oSel.options[oSel.selectedIndex].value;

switch (userSelection) {
case "war1" :
if (document.getElementById) {
theElement = document.getElementById("Warstwa2Label");
theElement.style.visibility = "visible";
theElement = document.getElementById("warstwa2");
theElement.style.visibility = "visible";
theElement = document.getElementById("Warstwa3Label");
theElement.style.visibility = "visible";
theElement = document.getElementById("warstwa3");
theElement.style.visibility = "visible";
} else if (ie4) {
document.all.Warstwa2Label.style.visibility = "visible";
form.warstwa2.style.visibility = "visible";
document.all.Warstwa3Label.style.visibility = "visible";
form.warstwa3.style.visibility = "visible";
} else if (nn4) {
theElement=document.layers["Warstwa2Label"];
theElement.visibility = "visible";
theElement=document.layers["warstwa2"];
theElement.visibility = "visible";
theElement=document.layers["Warstwa3Label"];
theElement.visibility = "visible";
theElement=document.layers["warstwa3"];
theElement.visibility = "visible";
}
break;

default :
if (document.getElementById) {
theElement = document.getElementById("Warstwa2Label");
theElement.style.visibility = "hidden";
theElement = document.getElementById("warstwa2");
theElement.style.visibility = "hidden";
theElement = document.getElementById("Warstwa3Label");
theElement.style.visibility = "hidden";
theElement = document.getElementById("warstwa3");
theElement.style.visibility = "hidden";
} else if (ie4) {
document.all.Warstwa2Label.style.visibility = "hidden";
form.warstwa2.style.visibility = "hidden";
document.all.Warstwa3Label.style.visibility = "hidden";
form.warstwa3.style.visibility = "hidden";
} else if (nn4) {
theElement=document.layers["Warstwa2Label"];
theElement.visibility = "hidden";
theElement=document.layers["warstwa2"];
theElement.visibility = "hidden";
theElement=document.layers["Warstwa3Label"];
theElement.visibility = "hidden";
theElement=document.layers["warstwa3"];
theElement.visibility = "hidden";
}
break;
}
return;
}

</script>


The above code is not going to work for you without changes. This code assumes that all of the "Warstwa..." references are actually the ID attributes of <div>s enclosing the items, and I can see that's not going to be true. Further, for the NS4 support to work, the <DIV>s must have "position:absolute;". So, at best this will give you some structures to play with. I hope it helps.