style.visibility not working in FireFox

Question

Hello friends,

I am having an aspx page with a panel. I am using the panel as to show a messagebox. The panel id is "panMessage". The panel contains a button label "Hide". I am showing the panel using code behind but need to close the panel with JS when user clicks on Hide button. I have attached the following code with onclick event of the button -

onclick="javascript:(<%=panMessage.ClientID%>).style.visibility='hidden';"

the click event works perfectly in IE but not in FireFox. I have googled and changed the code as -

onclick="javascript:(<%=panMessage.ClientID%>).style.display='none';"

but still the code is not working i.e. the panel is not going to hide in FireFox although it works in IE using this new code also.

Could someone guide me whats wrong i have done?

Thanks for your cooperation.

Answer 1

Use

document.getELementById ( "<%=panMessage.ClientID%>" ) to retrieve the element and then try setting the display or visibility attribute.

Set the display attribute to none so that the control won't take the space.

Answer 2

We'd really need to see the actual HTML output to be able to debug it for you.

The correct output should look something like this:

onclick="document.getElementById('panMessage').style.display='none';"

Note that you don't need javascript: in the event handlers.

Answer 3

First of all, visibility hidden and display none are not the same. The former will make the element consume the same space as it would have, if it would've been visible, whereas the latter won't. display: none is synonymous to visibility: hidden; position: absolute;

Other than that, your problem is probably due to the way you access your element. Try changing to the following:

onclick="document.getElementById('<%=panMessage.ClientID%>').style.display='none';"

Answer 4

It seems to me that the problem lies with (<%=panMessage.ClientID%>).

onclick="(<%=panMessage.ClientID%>).style.display='none';"

When rendered would give something like:

onclick="(panMessage_1).style.display='none';"

You should put something like:

onclick="document.getElementById('<%=panMessage.ClientID%>').style.display='none';"