Not working in Netscape: but it is in IE and firefox

[eroot]

Please help! This is the last coding hurdle before I am done with the
site I am presently working on. It seems like this should work, but it
isn't. (What is suppose to happen: when you select the option you want
from the drop down menu the appropriate <div> becomes visible). I have
put in some alerts to see where the code is failing, and for some
reason in Netscape it isn't completing the sequence. It seems like it
should be easy to fix... agh! Thank you.

<!--
function changeForm(what ) {
for (var i=0; i<what.options. length; i++)
{
alert('number of options: ' + what.options.le ngth)
if (what.options[i].selected) {
alert('selected ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="visible";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"visible";
} else {
alert('sees none')

document.all[what.options[i].value].style.visibili ty="visible";
}
} else {
alert('deselect ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="hidden";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"hidden";
} else {
alert('sees no')

document.all[what.options[i].value].style.visibili ty="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onChange="chang eForm(this.form .selectList)">
<OPTION VALUE="form1" SELECTED>Questi on 1
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>

<br>
<DIV STYLE="position : absolute">
</DIV>

<DIV ID="form1" style="position : absolute; visibility: visible;">
Answer 1
</DIV>

<DIV ID="form2" style="position : absolute; visibility: hidden;">
Answer 2
</DIV>

<DIV ID="form3" style="position : absolute; visibility: hidden;">
Answer 3 -
</DIV>

[Michael Winter]

On 11/07/2005 18:21, er***@telus.net wrote:

[snip]

It seems like this should work, but it isn't.
The all collection is a proprietary feature invented by Microsoft, and
implemented by few others. Mozilla recently decided to add 'silent'
support to cope with badly written code which doesn't check for support,
but blindly assumes the collection is available.

By 'silent', I mean that

if(document.all )

will fail in Firefox. Older versions of Mozilla software will fail
completely.

The solution is to use the getElementById method instead. The all
collection should be avoided for all but two conditions:

1) Providing getElementById emulation for browsers that don't
support it, but do implement the all collection. This only
really applies to IE4.
2) Providing a replacement for getElementsByTa gName in IE5.x when
passing an asterisk (*) as an argument. These versions will
always return an empty collection, rather than all elements.

[snip]
<!--
Remove that and its closing delimiter, below.

if(!document.ge tElementById) {
document.getEle mentById = function() {
return null;
};
}

function changeForm(what ) {
var f;

for(var i = 0, o = what.options, n = o.length; i < n; ++i) {
if(!(f = document.getEle mentById(o[i].value)) || !f.style) {
return;
}
f.style.display = o[i].selected
? ''
: 'none';
}
}

[snip]
<SELECT NAME="selectLis t" onChange="chang eForm(this.form .selectList)">
Just:

<select name="selectLis t" onchange="chang eForm(this);">

[snip]
<br>
<DIV STYLE="position : absolute">
</DIV>
Remove that,
<DIV ID="form1" style="position : absolute; visibility: visible;">

and use display property to control whether the element is rendered. You
can then remove the position declaration.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Mick White]

er***@telus.net wrote:

Please help! This is the last coding hurdle before I am done with the
site I am presently working on. It seems like this should work, but it
isn't. (What is suppose to happen: when you select the option you want
from the drop down menu the appropriate <div> becomes visible). I have
put in some alerts to see where the code is failing, and for some
reason in Netscape it isn't completing the sequence. It seems like it
should be easy to fix... agh! Thank you.
(not NN4, but it could be done):

function changeForm(what ){
var x;
if((x=document. getElementById( what.options[what.selectedIn dex].value)
&& x.style){
x.style.visibil ity=x.style.vis ibility=="hidde n"?"visible":"h idden";
}
}

<SELECT NAME="selectLis t" onChange="chang eForm(this)">
Mick

<!--
function changeForm(what ) {
for (var i=0; i<what.options. length; i++)
{
alert('number of options: ' + what.options.le ngth)
if (what.options[i].selected) {
alert('selected ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="visible";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"visible";
} else {
alert('sees none')

document.all[what.options[i].value].style.visibili ty="visible";
}
} else {
alert('deselect ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="hidden";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"hidden";
} else {
alert('sees no')

document.all[what.options[i].value].style.visibili ty="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onChange="chang eForm(this.form .selectList)">
<OPTION VALUE="form1" SELECTED>Questi on 1
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>

<br>
<DIV STYLE="position : absolute">
</DIV>

<DIV ID="form1" style="position : absolute; visibility: visible;">
Answer 1
</DIV>

<DIV ID="form2" style="position : absolute; visibility: hidden;">
Answer 2
</DIV>

<DIV ID="form3" style="position : absolute; visibility: hidden;">
Answer 3 -
</DIV>

[eroot]

Mike:
Thanks for the clarification. For some reason I still cannot get it to
work. The script isn't changing the hidden to visible. If I set them
all to visible it works but when the page is first launched all
'questions' show up.

<script language="javas cript">

if(!document.ge tElementById){
document.getEle mentById = function() {
return null;
};
}

function changeForm(what ){
var f;

for(var i = 0, o = what.options, n = o.length; i < n; ++i)
{
if(!(f = document.getEle mentById(o[i].value)) || !f.style) {
return;
}
f.style.display = o[i].selected
? ''
: 'none';
}
}

</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onchange="chang eForm(this);">
<OPTION VALUE="form1" SELECTED>Select a question
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>

<DIV ID="form1" style="visibili ty: visible;">
Answer 1
</DIV>

<DIV ID="form2" style="visibili ty: hidden;">
Answer 2
</DIV>

<DIV ID="form3" style="visibili ty: hidden;">
Answer 3
</DIV>

[Michael Winter]

On 11/07/2005 21:29, er***@telus.net wrote:

[snip]

For some reason I still cannot get it to work. The script isn't
changing the hidden to visible.
[snip]
f.style.display = o[i].selected
? ''
: 'none';
[snip]
<DIV ID="form1" style="visibili ty: visible;">

The script changes the display property, not visibility. This allows you
to hide the element so that it doesn't take up space without resorting
to absolutely positioning. In your current scheme, you'd use "display:
none;" to hide.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[ASM]

Mick White wrote:

(not NN4, but it could be done):
Ha! somebody thinking to NN4 ;-) thanks a lot.
(an chery on cake : small code understood by every navigator)

I run to try it (I didn't know NN4 could hide options)
function changeForm(what ){
var x;
if((x=document. getElementById( what.options[what.selectedIn dex].value)
&& x.style){
x.style.visibil ity=x.style.vis ibility=="hidde n"?"visible":"h idden";
}
}

<SELECT NAME="selectLis t" onChange="chang eForm(this)">
Mick

Question :
when option is hidden, how to get it back visible ?
(I mean : how to choice the wanted option without seeing it)

<!--
function changeForm(what ) {
for (var i=0; i<what.options. length; i++)
{
alert('number of options: ' + what.options.le ngth)
if (what.options[i].selected) {
alert('selected ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="visible";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"visible";
} else {
alert('sees none')

document.all[what.options[i].value].style.visibili ty="visible";
}
} else {
alert('deselect ' + i)
if(document.all ) {
alert('sees document.all')

document.all[what.options[i].value].style.visibili ty="hidden";
} else if (document.layer s){
alert('sees document.layers ')
document.layers[what.options[i].value].visibility =
"hidden";
} else {
alert('sees no')

document.all[what.options[i].value].style.visibili ty="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onChange="chang eForm(this.form .selectList)">
<OPTION VALUE="form1" SELECTED>Questi on 1
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>

<br>
<DIV STYLE="position : absolute">
</DIV>

<DIV ID="form1" style="position : absolute; visibility: visible;">
Answer 1
</DIV>

<DIV ID="form2" style="position : absolute; visibility: hidden;">
Answer 2
</DIV>

<DIV ID="form3" style="position : absolute; visibility: hidden;">
Answer 3 - </DIV>

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

er***@telus.net wrote:

Mike:
Thanks for the clarification. For some reason I still cannot get it to
work. The script isn't changing the hidden to visible.
no ... change the display (in Mike's function)
If I set them
all to visible it works but when the page is first launched all
'questions' show up.
<body onload="changeF orm(document.fo rms[0].selectList);">

or better :

<style type="text/css">
#form1, #form2, #form3 { display: none; visisibility: visible }
</style>

If you use display and if your forms all are same hight
only the form displayed appears
on next choice the other form will take its place
<script language="javas cript">

if(!document.ge tElementById){
document.getEle mentById = function() {
return null;
};
}

function changeForm(what ){
var f;

for(var i = 0, o = what.options, n = o.length; i < n; ++i)
{
if(!(f = document.getEle mentById(o[i].value)) || !f.style) {
return;
}
f.style.display = o[i].selected
? ''
: 'none';
}
}

</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onchange="chang eForm(this);">
<OPTION VALUE="form1" SELECTED>Select a question
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>
<DIV ID="form1"> Answer 1
</DIV>
<DIV ID="form2"> Answer 2
</DIV>
<DIV ID="form3"> Answer 3
</DIV>

--
Stephane Moriaux et son [moins] vieux Mac

[eroot]

Mick,
I am also trying to get your code to work... can you tell me what I am
doing wrong? (I am getting javascript errors)

<script language="javas cript">

function changeForm(what ) {
var x;
if((x=document. getElementById( what.options[what.selectedIn dex].value)
&& x.style)
{
x.style.visibil ity=x.style.vis ibility=="hidde n"?"visible":"h idden";
}
}
</script>

</head>

<FORM>
<SELECT NAME="selectLis t" onChange="chang eForm(this)">
<OPTION VALUE="form1" SELECTED>Questi on 1
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
</SELECT>
<br>

<DIV ID="form1" style="visibili ty: visible;">
Answer 1
</DIV>

<DIV ID="form2" style="visibili ty: hidden;">
Answer 2
</DIV>

<DIV ID="form3" style="visibili ty: hidden;">
Answer 3
</DIV>

[Mick White]

er***@telus.net wrote:

Mick,
I am also trying to get your code to work... can you tell me what I am
doing wrong? (I am getting javascript errors)

Sorry, a typo:
if((x=document. getElementById( what.options[what.selectedIn dex].value))
&& x.style)

Note the added ")"

Mick

[snip]

[ASM]

er***@telus.net wrote:

Mick,
I am also trying to get your code to work... can you tell me what I am
doing wrong? (I am getting javascript errors)

<script language="javas cript">

function changeForm(what ) {
var x;
if((x=document. getElementById( what.options[what.selectedIn dex].value)&& x.style)

if(x=document.g etElementById(w hat.options[what.selectedIn dex].value)&&
x.style)

but does no more work with me
I do that (less clean) :

<script type="text/javascript">
<!--
function changeForm(what ){
for(var i=0;i<what.leng th;i++)
if(document.get ElementById&&do cument.getEleme ntById(what.opt ions[i].value))
document.getEle mentById(what.o ptions[i].value).style.d isplay='none';
var x = what.options[what.selectedIn dex].value;
if(x=document.g etElementById(x ))
x.style.display ='block';
else alert('Sorry, such a question doesn\'t exist');
}
//-->
</script>
<style type="text/css">
#form1, #form2, #form3 { display: none }
</style>
<form>
<SELECT onChange="chang eForm(this)">
<OPTION VALUE="form1" SELECTED>Questi on 1
<OPTION VALUE="form2">Q uestion 2
<OPTION VALUE="form3">Q uestion 3
<OPTION VALUE="form4">Q uestion 4
</SELECT>
</form>
<form id="form1">
<input type=submit value=" F O R M _ 1 ">
</form>
<form id="form2">
<input type=submit value=" F O R M _ 2 ">
</form>
<form id="form3">
<input type=submit value=" F O R M _ 3 ">
</form>
</html>
--
Stephane Moriaux et son [moins] vieux Mac