Link to home
Start Free TrialLog in
Avatar of ppk78
ppk78

asked on

Able to show in IE and failure in NS

The following codes work well in IE and fails in Netscape.

Could anyone help me on it?

Thanks very much for the attention.

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<style type="text/css">
     #ie {display:block}
     #ns {display:table-cell}
</style>
<script language="JavaScript">
     <!--
     function JsMenuBar(jsId) {
          for (jsCounter=1;jsCounter<3;jsCounter++) {
               eval("item"+jsCounter).style.display="none";
          }

          jsId.style.display="block";
     }
     //-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0">
<table width="100%" cellspacing="0">
     <tr>
          <td width="50">&nbsp;</td>
          <td width="100" align="center" bgcolor="#009900" style="cursor:pointer" onclick="JsMenuBar(item1);return true">Tab 1</td>
          <td width="10">&nbsp;</td>
          <td width="100" align="center" bgcolor="#FF9900" style="cursor:pointer" onclick="JsMenuBar(item2);return true">Tab 2</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td colspan="5" bgcolor="#009900" id="item1" style="display:block">Contents of Tab 1</td>
          <td colspan="5" bgcolor="#FF9900" id="item2" style="display:none">Contents of Tab 2</td>
     </tr>
</table>
</body>
</html>
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
It will never work in NS4.
Avatar of ppk78
ppk78

ASKER

How should I modify it in order to let it run successfully in Netscape?
ASKER CERTIFIED SOLUTION
Avatar of pocar
pocar
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of pocar
pocar
Btw, In this case I would rather use layers (<div> tag), because their are much easier to deal with.
Avatar of pocar
pocar
Now I see, that Mozilla couses some traubles, so there is one working example using layers. You just have to set top position of layers (in % or px). If top position of layers not know at design time, then change <div></div> to <span></span> and set left position. And make sure that you will set margins of page (different browsers use different).
And instead of 'display' is 'visibility' (NS4 use <layer> insted of <div> accessed by document.layers[...] and instead of 'hidden' is 'hide' - but never use that and neither have that browser on my system):

<script language="JavaScript">
    <!--
    function JsMenuBar(jsId) {
         for (jsCounter=1;jsCounter<3;jsCounter++) {
              //eval("item"+jsCounter).style.display="none";
                 document.getElementById('item'+jsCounter).style.visibility = 'hidden';
         }

         //jsId.style.display="block";
           document.getElementById(jsId).style.visibility = '';
    }
    //-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0">
<table width="100%" cellspacing="0">
    <tr><td>
         <table><tr>
           <td width="50">&nbsp;</td>
         <td width="100" align="center" bgcolor="#009900" style="cursor:pointer" onclick="JsMenuBar('item1');return true">Tab 1</td>
         <td width="10">&nbsp;</td>
         <td width="100" align="center" bgcolor="#FF9900" style="cursor:pointer" onclick="JsMenuBar('item2');return true">Tab 2</td>
         <td>&nbsp;</td></tr>
           </table>
           </td>
    </tr>
    <tr><td>
         <div id="item1" style="width:100%; background-color:#009900; position:absolute; top:28px;">Contents of Tab 1</div>
          <div id="item2" style="width:100%; background-color:#FF9900; position:absolute; top:28px; visibility: hidden">Contents of Tab 2</div>
    </td></tr>
</table>
</body>