Is this possible .....

http://www.geocities.com/jezman2002/test.html

I am using javascript to hide and show a branch in a tree menu. I have an empty cell below the menu options that is 160px high. Now when the menu opens and pushes everything down is it possible to make the empty cell collapse to fit the content as much as possible ?

thanks for your time.
LVL 18
Eternal_StudentAsked:
Who is Participating?
 
PashaModConnect With a Mentor Commented:
Closed, 50 points refunded.
PashaMod
Community Support Moderator
0
 
RozanaZCommented:
Is this ok?

<html>
   <head>
   <title>Coating Systems International Limited (CSI)</title>
   <script language="JavaScript">
   function showBranch(branch) {
      var objBranch =
         document.getElementById(branch).style;
         var tdObj = document.getElementById("menuTd");
      if(objBranch.display=="block")
        {
         objBranch.display="none";
           tdObj.style.height = 160;
        }
      else
        {
         objBranch.display="block";
             tdObj.style.height = 10;
        }
   }  
   </script>

   <style>
   body{
               margin:0px;
          scrollbar-arrow-color:#006666;    
        scrollbar-track-color:#ffffff;
          scrollbar-highlight-color:#006666;  
          scrollbar-face-color:#C4DDDD;
          scrollbar-3dlight-color:#C4DDDD;
          scrollbar-base-color:#669999;
        scrollbar-shadow-color:#C4DDDD;
   }
   .trigger{
      cursor: pointer;
      cursor: hand;
        padding-left:25px;
   }
   .branch{
      color: #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:8pt;
        font-weight:500;
      display: none;
      padding-left:30px;
        line-height:13px;
   }
   .mainlinks{
               font-family:Arial, Helvetica, sans-serif;
            font-size:9pt;
            color:#006666;
            font-weight:bolder;
      }
      .tblmain{
                  width:100%;
                  height:100%;
      }
      .menu{
            height: 30px;
      }
   </style>
   
   </head>
   <body>
   <table class="tblmain" cellpadding="0" cellspacing="0">
   <tr valign="top">
   <td>
   <table cellpadding="0" cellspacing="0" bgcolor="#C3E3E1">
   <tr>
   <td height="50px">&nbsp;</td>
   <td rowspan="7" bgcolor="#669999" width="16px">&nbsp;</td>
   <td rowspan="7" bgcolor="#006666" width="14px">&nbsp;</td>
   </tr>
   <tr>
     <td class="trigger" height="40px"><span class="mainlinks">COMPANY<br> PROFILE<br>
     </span></td></tr>
   <tr>
   <td class="menu" width="165px">
    <div class="trigger"
      onClick="showBranch('branch1')">
      <span class="mainlinks">PRODUCTS</span>
      </div>
      <span class="branch" id="branch1">
           TABLET COATING<br> MACHINE<br>
         &#x2192; &nbsp;Efficiency<br>
         &#x2192; &nbsp;Quality<br>
         &#x2192; &nbsp;Material<br>
         &#x2192; &nbsp;Drum<br>
         &#x2192; &nbsp;Control<br>
             &#x2192; &nbsp;Cleaning<br><br>
             SPRAY GUN MACHINE<br>
         &#x2192; &nbsp;Tags, Tags, Tags<br>
         &#x2192; &nbsp;Hyperlinks</a><br>
         &#x2192; &nbsp;Images<br>
         &#x2192; &nbsp;Tables<br>
         &#x2192; &nbsp;Forms<br><br></span>
            
              </td>
        </tr>
        <tr><td class="menu">
  <div class="trigger"
    onClick="showBranch('branch2')">
      <span class="mainlinks">NEWS</span>
   </div>
      <span class="branch" id="branch2">
         &#x2192; &nbsp;Inline Styles<br>
         &#x2192; &nbsp;Document Wide Styles<br>
         &#x2192; &nbsp;External Style Sheets<br>
         &#x2192; &nbsp;Formatting Text<br>
         &#x2192; &nbsp;Positioning<br><br>
      </span>
                </td>
          </tr>
              <tr><td class="menu">
  <div class="trigger"
  onClick="showBranch('branch3')">
      <span class="mainlinks">CASE STUDIES</span>
   </div>
      <span class="branch" id="branch3">
         &#x2192; &nbsp;Inline Styles<br>
         &#x2192; &nbsp;Document Wide Styles<br>
         &#x2192; &nbsp;External Style Sheets<br>
         &#x2192; &nbsp;Formatting Text<br>
         &#x2192; &nbsp;Positioning<br><br>
      </span>
        </td>
        </tr>
        <tr><td class="menu">
  <div class="trigger"
      onClick="showBranch('branch4')">
      <span class="mainlinks">CONTACT US</span>
  </div>
      <span class="branch" id="branch4">
         &#x2192; &nbsp;Object Detection<br><br>
            </span>
                     </td>
          </tr>
            <tr><td id="menuTd" name="menuTd" height="160px">&nbsp;</td></tr>
            <tr><td colspan="3"><div align="right"><img src="images/bottom.gif" width="195" height="113"></div></td>
            </tr>
      </table>
       </td>  
               </tr>  
             </table>
       </body>
   </html>
<!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>
<script language="JavaScript">var PUpage="76001081"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript" src="http://www.geocities.com/js_source/ygIELib9.js?v3"></script><script language="JavaScript">var yviContents='http://us.toto.geo.yahoo.com/toto?s=76001081&l=NE&b=1&t=1094993766';yviR='us';yfiEA(0);</script><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1094993766" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001081&t=1094993766" ALT=1 WIDTH=1 HEIGHT=1>
0
 
Eternal_StudentAuthor Commented:
woa .. can you actually explain what you did there to change my code ?
Its nearly what I want, except in Netscape 6 when you close the branch the cell doesn't retract to its normal postion???
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.