Show/Hide form field in IE & Firefox

[Paul Lautman]

Hi y'all,
I found the toggle function (shown below) and applied it to a form of mine.
It works fine in IE, but in Firefox it appears to fail on the eval lines.

I've searched around but I can't seem to find the correct invocation to get
the field to appear in Firefox.

I've copied below the call and the html of the field itself.

Can anyone point me to what is wrong with it and more to the point, how to
get it working?

TIA
Regards
Paul

toggleT('divt1' ,'s');

function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document. all."+_w+".styl e.visibility='v isible';");
if (_h=='h') eval("document. all."+_w+".styl e.visibility='h idden';");
} else { // is NS?
if (_h=='s') eval("document. layers['"+_w+"'].visibility='sh ow';");
if (_h=='h') eval("document. layers['"+_w+"'].visibility='hi de';");
}

<span id="divt1" style="visibili ty:hidden;posit ion:relative;to p:0;left:0">
<label for="other">Ple ase specify where you heard about us:</label>
<input type="text" size="40" name="other" id="other">
</span>

[bobzimuta]

I believe layers are deprecated, or not supported in firefox. You can
use the css method you're using for the IE section (i.e.
style.visibilit y = 'visible' ). You may even be able to consolidate
both methods (IE and Firefox) into one, which would make for cleaner
code :)

[Evertjan.]

Paul Lautman wrote on 02 mrt 2006 in comp.lang.javas cript:

toggleT('divt1' ,'s');
function toggleT(_w,_h) {
if (document.all) { // is IE
IE and FF support support GetElementById and css !!
[and most NS too, but are there any out there?]
if (_h=='s') eval("document. all."+_w+".styl e.visibility='v isible';");
De not use eval() it is evil and not necessary

document.all[_w].style.visibili ty='visible';

will do nicely.
if (_h=='h') eval("document. all."+_w+".styl e.visibility='h idden';");
} else { // is NS?
if (_h=='s') eval("document. layers['"+_w+"'].visibility='sh ow';");
if (_h=='h') eval("document. layers['"+_w+"'].visibility='hi de';");
}

try:

function toggleT(_w,_h) {
var xw = document.getEle mentById(_w)
if (_h == 's')
xw.style.visibi lity = 'visible';
else
xw.style.visibi lity = 'hidden';
}

or even shorter:

function toggleT(_w,_h) {
document.getEle mentById(_w).st yle.visibility =
(_h == 's') ? 'visible' : 'hidden';
}

not tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Paul Lautman]

Evertjan. wrote:

try:

function toggleT(_w,_h) {
var xw = document.getEle mentById(_w)
if (_h == 's')
xw.style.visibi lity = 'visible';
else
xw.style.visibi lity = 'hidden';
}

or even shorter:

function toggleT(_w,_h) {
document.getEle mentById(_w).st yle.visibility =
(_h == 's') ? 'visible' : 'hidden';
}

not tested

Thanks for the prompt reply.
I did some more poking around and ended up changing from visibility too
display thus:

document.getEle mentById(_w).st yle.display = 'block';
document.getEle mentById(_w).st yle.display = 'none';

Since these both seem to accomplish the same thing, I wonder what the
difference is between the display and the visible properties and is one of
them better than the other for this application?

Any ideas?

TIA
Paul

[Lasse Reichstein Nielsen]

"Paul Lautman" <pa**********@b tinternet.com> writes:

I found the toggle function (shown below) and applied it to a form of mine.
It works fine in IE, but in Firefox it appears to fail on the eval lines.
As it should. This script is so old it belives there are only two browsers
out there, IE and Netscape 4. It's a small wonder that the IE branch still
works.

It's also horribly written, even by the standard of its time, using
eval where it is absolutely not necessary.

My suggestion is to scrap it and start fresh.
toggleT('divt1' ,'s');

function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document. all."+_w+".styl e.visibility='v isible';");
if (_h=='h') eval("document. all."+_w+".styl e.visibility='h idden';");
} else { // is NS?
if (_h=='s') eval("document. layers['"+_w+"'].visibility='sh ow';");
if (_h=='h') eval("document. layers['"+_w+"'].visibility='hi de';");
}

Ick. Why use "s" or "h" instead of true and false. But that's the least
of this hackery's problems.

My suggestion:

toggleT('divT', true);

function toggleT(elemId, visible) {
document.getEle mentById(elemId ).style.visibil ity =
visible?"visibl e":"hidden";
}

It's not as backwards compatible as possible, failing in IE 4 and
Netscape 4. If these are really important, you can use:

function toggleT(elemId, visible) {
var elem;
if (document.getEl ementById) {
elem = document.getEle mentById(elemId );
} else if (document.all) {
elem = document.all[elemId];
} else if (document.layer s) {
elem = document.layers[elemId];
} else {
return; // give up!
}
(elem.style || elem).visibilit y = visible ? "visible" : "hidden";
}

Not tested :)

Good luck.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Randy Webb]

Paul Lautman said the following on 3/2/2006 3:21 PM:

Evertjan. wrote:

try:

function toggleT(_w,_h) {
var xw = document.getEle mentById(_w)
if (_h == 's')
xw.style.visibi lity = 'visible';
else
xw.style.visibi lity = 'hidden';
}

or even shorter:

function toggleT(_w,_h) {
document.getEle mentById(_w).st yle.visibility =
(_h == 's') ? 'visible' : 'hidden';
}

not tested

Thanks for the prompt reply.
I did some more poking around and ended up changing from visibility too
display thus:

document.getEle mentById(_w).st yle.display = 'block';
document.getEle mentById(_w).st yle.display = 'none';
Since these both seem to accomplish the same thing, I wonder what the
difference is between the display and the visible properties and is one of
them better than the other for this application?

visibility will just hide the element. the display property will remove
it from the flow of the page entirely.

Put this in a test page and view it:
<div>some text</div>
<div style="display: none">Some other text</div>
<div>This text will align right below the some text div</div>
<div>some text</div>
<div style="visibili ty:hidden">Some other text</div>
<div>This text will not align right below the some text div</div>

The only difference in the two is one uses visibility, the other uses
display
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Randy Webb]

Evertjan. said the following on 3/2/2006 3:13 PM:

Paul Lautman wrote on 02 mrt 2006 in comp.lang.javas cript:

toggleT('divt1' ,'s');

function toggleT(_w,_h) {
if (document.all) { // is IE

IE and FF support support GetElementById and css !!
[and most NS too, but are there any out there?]

IE and FF support getElementById but they only support GetElementById if
you define them yourself <g> :)

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Paul Lautman]

Randy Webb wrote:

visibility will just hide the element. the display property will
remove it from the flow of the page entirely.

Put this in a test page and view it:
<div>some text</div>
<div style="display: none">Some other text</div>
<div>This text will align right below the some text div</div>
<div>some text</div>
<div style="visibili ty:hidden">Some other text</div>
<div>This text will not align right below the some text div</div>

The only difference in the two is one uses visibility, the other uses
display

Ahh yes, I missed that when viewing the page. That is what I wanted to
happen in the first place. Serendipity!

Thanks everyone for such speedy assistance.