Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Is this possible .....

Posted on 2004-09-12
4
186 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
ID: 12038073
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
ID: 12039284
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
ID: 12091794
Closed, 50 points refunded.
PashaMod
Community Support Moderator
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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