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


E

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.length)
if (what.options.selected) {
alert('selected ' + i)
if(document.all) {
alert('sees document.all')

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

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

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

document.all[what.options.value].style.visibility="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectList" onChange="changeForm(this.form.selectList)">
<OPTION VALUE="form1" SELECTED>Question 1
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 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>
 
Ad

Advertisements

M

Michael Winter

On 11/07/2005 18:21, (e-mail address removed) 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 getElementsByTagName 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.getElementById) {
document.getElementById = function() {
return null;
};
}

function changeForm(what) {
var f;

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

[snip]
<SELECT NAME="selectList" onChange="changeForm(this.form.selectList)">

Just:

<select name="selectList" onchange="changeForm(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
 
M

Mick White

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.selectedIndex].value)
&& x.style){
x.style.visibility=x.style.visibility=="hidden"?"visible":"hidden";
}
}

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

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

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

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

document.all[what.options.value].style.visibility="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectList" onChange="changeForm(this.form.selectList)">
<OPTION VALUE="form1" SELECTED>Question 1
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 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>
 
E

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="javascript">

if(!document.getElementById){
document.getElementById = function() {
return null;
};
}

function changeForm(what){
var f;

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

</script>

</head>

<FORM>
<SELECT NAME="selectList" onchange="changeForm(this);">
<OPTION VALUE="form1" SELECTED>Select a question
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 3
</SELECT>

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

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

<DIV ID="form3" style="visibility: hidden;">
Answer 3
</DIV>
 
M

Michael Winter

On 11/07/2005 21:29, (e-mail address removed) 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.selected
? ''
: 'none';
[snip]

<DIV ID="form1" style="visibility: 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
 
A

ASM

Mick said:
(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.selectedIndex].value)
&& x.style){
x.style.visibility=x.style.visibility=="hidden"?"visible":"hidden";
}
}

<SELECT NAME="selectList" onChange="changeForm(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.length)
if (what.options.selected) {
alert('selected ' + i)
if(document.all) {
alert('sees document.all')

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

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

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

document.all[what.options.value].style.visibility="hidden";
}
}
}
}

//-->
</script>

</head>

<FORM>
<SELECT NAME="selectList" onChange="changeForm(this.form.selectList)">
<OPTION VALUE="form1" SELECTED>Question 1
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 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>
 
Ad

Advertisements

A

ASM

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="changeForm(document.forms[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="javascript">

if(!document.getElementById){
document.getElementById = function() {
return null;
};
}

function changeForm(what){
var f;

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

</script>

</head>

<FORM>
<SELECT NAME="selectList" onchange="changeForm(this);">
<OPTION VALUE="form1" SELECTED>Select a question
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 3
</SELECT>


Answer 1
</DIV>
 
E

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="javascript">

function changeForm(what) {
var x;
if((x=document.getElementById(what.options[what.selectedIndex].value)
&& x.style)
{
x.style.visibility=x.style.visibility=="hidden"?"visible":"hidden";
}
}
</script>

</head>

<FORM>
<SELECT NAME="selectList" onChange="changeForm(this)">
<OPTION VALUE="form1" SELECTED>Question 1
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 3
</SELECT>
<br>

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

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

<DIV ID="form3" style="visibility: hidden;">
Answer 3
</DIV>
 
M

Mick White

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.selectedIndex].value))
&& x.style)

Note the added ")"

Mick

[snip]
 
A

ASM

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="javascript">

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

if(x=document.getElementById(what.options[what.selectedIndex].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.length;i++)
if(document.getElementById&&document.getElementById(what.options.value))
document.getElementById(what.options.value).style.display='none';
var x = what.options[what.selectedIndex].value;
if(x=document.getElementById(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="changeForm(this)">
<OPTION VALUE="form1" SELECTED>Question 1
<OPTION VALUE="form2">Question 2
<OPTION VALUE="form3">Question 3
<OPTION VALUE="form4">Question 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>
 
A

ASM

Mick said:
Sorry, a typo:


if((x=document.getElementById(what.options[what.selectedIndex].value))
&& x.style)

Note the added ")"

Ho yes ! but why ?

doing that (thought both equal)
if(x=document.getElementById(what.options[what.selectedIndex].value)&&x.style)
gives an error
 
Ad

Advertisements

M

Michael Winter

On 13/07/2005 23:22, ASM wrote:

[snip]
if(x=document.getElementById(what.options[what.selectedIndex].value)&&x.style)

gives an error

The assignment operator has a very low precedence, so what you're
executing above is effectively the same as:

var t = document.getElementById(...),
x = t && x.style;

if(x) ...

instead of:

var x = document.getElementById(...);

if(x && x.style) ...

At the moment x.style is evaluated in the first case, x is still
undefined so attempting to access a property results in an error.

You must force the assignment to occur first, which is why Mick
introduced parentheses around that particular part of the expression.

Mike
 
M

Mick White

ASM said:
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="javascript">

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


if(x=document.getElementById(what.options[what.selectedIndex].value)&&
x.style)

but does no more work with me

Or for me....
var x;
if(
(x=document.getElementById(what.options[what.selectedIndex].value)
&&
x.style)

Works for me, note the parentheses: "(" and ")".
Mick

[snip]
 
R

Robi

Mick White wrote:
[...]
if((x=document.getElementById(what.options[what.selectedIndex].value)&&
x.style)

if(x=document.getElementById(what.options[what.selectedIndex].value)&&
x.style)

but does no more work with me

Or for me....
var x;
if(
(x=document.getElementById(what.options[what.selectedIndex].value) ) /* <--- ????? */
&&
x.style)

Works for me, note the parentheses: "(" and ")".
Mick

uhm... Mick? you didn't just by chance add the "missing-parentheses-typo" again?

if((x=document.getElementById(what.options[what.selectedIndex].value))&&x.style)
12 3 32 1
.. ^
 
Ad

Advertisements

M

Mick White

Robi wrote:
[snip]
uhm... Mick? you didn't just by chance add the "missing-parentheses-typo" again?

if((x=document.getElementById(what.options[what.selectedIndex].value))&&x.style)
12 3 32


if
(
(
x=document.getElementById
(
what.options[what.selectedIndex].value
)
)
&& x.style
)

Mick
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top