Solved

Is this possible .....

Posted on 2004-09-12
4
185 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
WordPress Themes 10 41
How can I started with all items collapsed when using Nested Sortable ? 4 30
compact pure CSS Read More Toggle 4 58
Html5 Index on a table 7 25
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

813 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

8 Experts available now in Live!

Get 1:1 Help Now