views:

89

answers:

1

Hello,

I am writing this code in html:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>

<script language="javascript" type="text/javascript">

function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
 }
</script>

<title>Welcome to the memory game</title>
</head>
<body> 

    <h1>Welcome to the memory game!</h1>
    <input type="button" name="type" value='Show Layer' onclick="setVisibility('sub3', 'inline');"/>
    <input type="button" name="type" value='Hide Layer' onclick="setVisibility('sub3', 'none');"/> 

    <div id="sub3">Message Box</div>
</body> </html>

It suppose to make the "div" disappear and reapper, but it works in chrome and not in explorer.

Anyone has any idea how can I make it work in explorer (I tried allowing blocked content when that message about activeX appears in explorer)?

Thanks,

Greg

+2  A: 

Can I suggest that you try using jQuery? It is very cross-browser friendly and has a .toggle() function to show/hide a DOM object.

Your function in jQuery would look like

function setVisibility(id) {
   $('#' + id).toggle();
}
Bryan Denny
@Greg: JQuery handles cross-browser problems for you, and also gives you some advanced functionality that's nearly impossible to write yourself.
Dean J
I second this wholeheartedly.
DCD
jQuery is also about 50KB. You don't need 50KB of code downloaded and parsed just to toggle the visibility of an element.
Chibu
@Chibu: 50KB is worth handling many of the cross-browser problems that might make you want to bang your head against the wall later. And if you use the library from Google then it is most likely already cached from being used on another site. http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
Bryan Denny