Javascript form not working in Firefox

Problems getting form to work in Firefox

[AlvinSA]

Hi

I've inserted a javascript form on my site, and it works fine in IE, but won't work in Firefox. The script is intended to hide text, and display the text when a button is clicked. Any suggestions? Here's the script:

<script type="text/javascript" language="JavaScript">
<!--
function display(toggleText) {
if (document.layers && document.layers[toggleText] != null)
document.layers[toggleText].visibility = 'visible';
else if (document.all)
document.all[toggleText].style.visibility = 'visible';
}
function hide(toggleText) {
if (document.layers && document.layers[toggleText] != null)
document.layers[toggleText].visibility = 'hidden';
else if (document.all)
document.all[toggleText].style.visibility = 'hidden';
}
//-->
</script>

<style type="text/css">
.hideDisplayStyle {
visibility: hidden;
font-weight:bold;
color:#ff9900;
}
</style>

Then the form.....

<form>
<input type="button" class="button" value="Show Contact Details" onClick="display('toggleText');">
<input type="button" class="button" value="Hide Contact Details" onClick="hide('toggleText');">
</form>

<div ID="toggleText" CLASS="hideDisplayStyle">
............................
text to be hidden/displayed
............................
</div>

[rainborick]

document.layers was a property available only in Netscape v4.x. No other browser supports it. You should be using document.getElementById() if that function is available in order to support modern versions of all browsers, including IE. Then fall through to document.all to support IE v4.x.

[AlvinSA]

Hi

Thanx.

I changed the entire script, and it's working 100%. See:

<script language="javascript" type="text/javascript">
function A_onclick(div) {
var d = document.getElementById(div);
if( d.style.display =="none")
{
d.style.display ="block";
}
else
{
d.style.display ="none";
}
}
</script>

<a href="" onclick="A_onclick('MyDiv');return false;">click</a>

<div id ="MyDiv" styel="display:none" >text to hide/display</div>

This works perfectly in IE and FF.

[rocknbil]

Just a small improvement. :-)

<script type="text/javascript"> 
function A_onclick(div) { 
 var d = document.getElementById(div); 
 d.style.display = (d.style.display =="none")?'block':'none'; 
 return false; 
} 
</script> 

<a href="#" onclick="return A_onclick('MyDiv');">click</a>

<div id="MyDiv" style="display:none">text to hide/display</div>

The more inline JS, etc. you move to an external function the easier your HTML will be to maintain.

Note that Javascript only recognizes "display:none" on the div at first load because it's an inline style. Move that style to a style sheet and it will no longer work. Details and fix [webmasterworld.com]

[AlvinSA]

Thanx

Also works perfectly. Now if I could just get the script to reload the page, and show the text on the reload, my issues will be solved.

Any ideas?

[AlvinSA]

Having implemented the code above, and it works perfectly, I have another challenge.

At the moment, when someone clicks the link, the text that is hidden appears. What I need for it to do is reload the page, and on reload, show the text. I've wrapped the link around a form:

"<a href="#" onclick="return A_onclick('MyDiv');"><form><input type="button" class="button" value="Show Contact Details >>>"></form></a>"

I tried changing the "type=button" to "type=submit", and the form reloads, but on reload, it hides the text again (obviously, because the script is telling it to be hidden).

Is there any way that I can get the hidden effect only on the first load, and when the page reloads, the text shows?

Any ideas?

[rocknbil]

What you have there is invalid html, you can't surround a form (block element) with the inline anchor element.

But I *think* the solution is to set a cookie. You don't even need to reload the page.

Add a piece to check for the cookie on page load; if it's present, set the div to block. If the cookie is not present, set it in in your show/hide. Next time the page is visited the cookie read will set the div to block.

You can use a session cookie, which expires when the browser is closed, or a valid expire date. Any JS tutorial on cookies will set you up.