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>
 
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.
Click to expand...

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]
<!--
Click to expand...

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)">
Click to expand...

Just:

<select name="selectList" onchange="changeForm(this);">

[snip]
<br>
<DIV STYLE="position: absolute">
</DIV>
Click to expand...

Remove that,
<DIV ID="form1" style="position: absolute; visibility: visible;">
Click to expand...

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.
Click to expand...

(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>
Click to expand...
 
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;">
Click to expand...


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):
Click to expand...

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
Click to expand...

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>
Click to expand...
Click to expand...
 
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.
Click to expand...

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.
Click to expand...

<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>
Click to expand...


Answer 1
</DIV>
Click to expand...
 
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)
Click to expand...


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)
Click to expand...

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 ")"
Click to expand...

Ho yes ! but why ?

doing that (thought both equal)
if(x=document.getElementById(what.options[what.selectedIndex].value)&&x.style)
gives an error
 
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
Click to expand...

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)
Click to expand...


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

but does no more work with me
Click to expand...

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)
Click to expand...

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

but does no more work with me
Click to expand...

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

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

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
.. ^
 
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
Click to expand...


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

Similar Threads

Script working in Firefox but not Chrome and Safari 3
Help With a Script 5
How do I fix this issue in sqaurespace code block? 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Survey details won't go through using php, ajax, Mysql 0
Netscape compatibility 5
Hierarchical menus fail in ie but work in firefox / netscape / opera 0
DIV Pops not working for Netscape/Mozilla etc... -- only IE 2

Members online

Total: 57 (members: 1, guests: 56)
Robots: 454

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,810
Latest member
Kassie0918

Latest Threads

Top