Solved

Is this possible .....

Posted on 2004-09-12
4
184 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:Eternal_Student
4 Comments
 
LVL 8

Expert Comment

by:RozanaZ
Comment Utility
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
 
LVL 18

Author Comment

by:Eternal_Student
Comment Utility
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
 

Accepted Solution

by:
PashaMod earned 0 total points
Comment Utility
Closed, 50 points refunded.
PashaMod
Community Support Moderator
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now