Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Showing/hiding Tables w/ Javascript

    I finally found code that actually works. I click on the button, and the table disappears. I click on the button again, and it reappears. Like magic! I have two problems still.

    (1) When I click on the table, it disappears, but the space that it was in is still empty. When it retracts, I want the rest of the text to retract with it (not disappearing text--i.e. have the text occupy the space where the table was, and move back when the table reappears. note: the text is directly below the table); otherwise, what is the point of a show/hide button? It's meant to save some space.

    (2) I want the text of the show/hide button to change to "Show" when the table is not present.

    Forgive me if these are novice questions, but I've only just begun to code using JavaScript! Thank you!

    -Chris (thatspoppycock.com)

    <script>
    function showTR(id){
    if (document.getElementById && document.createTextNode)
    {
    var tr=document.getElementById(id);
    if (tr) {
    if (tr.style.display == 'none') {
    // To make tr tags disappear
    // we set display to none, as usual
    // to make them appear again
    // we set style to block for IE
    // but for firefox we use table-row
    try {
    tr.style.display='table-row';
    } catch(e) {
    tr.style.display = 'block';
    }
    }
    else {
    tr.style.display = 'none';
    }
    }
    }
    }

    </script>
    </head>

    <body>

    <table width="350" height="24" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><div align="center" class="heading">Navigation <span class="paragraph">[<A href="javascript:;" onclick='showTR("nav_toggle")'>hide</a>]</span></div></td>
    </tr>
    </table>

    <div><table width="350" height="120" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="nav_toggle" valign="top"><ol type="I" class="paragraph">
    <li>
    <div align="left" class="romanlist">General Information</div>
    </li>
    <li>
    <div align="left" class="romanlist">Pharmacology and Pharmacokinetics</div>
    </li>
    <li>
    <div align="left" class="romanlist">Side Effects</div>
    </li>
    <li>
    <div align="left"><span class="romanlist">Suboxone/Subutex </span>
    <ol type="a">
    <li class="paragraph">The Naloxone Myth</li>
    <li class="paragraph">Blocking Effects</li>
    <li class="paragraph">Miracle Pill?</li>
    </ol>
    </div>
    </li>
    <li>
    <div align="left" class="paragraph">Withdrawal</div>
    </li>
    </ol></td>
    </tr>
    </table>
    </div>

    <p> text text text </p>

    </body>
    Last edited by ridinthetrain; 11-04-2006 at 07:45 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Not really sure about the first problem, but I've solved the second. The code is below. Since you're new, I'll explain how I did it:

    First, I assigned the <a> element an id ("displayToggle"). Second, I made showTR() change the text of the <a> element. Here's how I did that:

    I used DOM scripting to find the <a> element (via its id), remove its first child node, and append a text node with the appropriate text. You can learn more about DOM scripting here.

    1212jtraceur

    p.s. It really helps if you indent your code to clearly show nesting. Also, when you put code in a message, enclose it in [ code ] and [ /code ] (without spaces). That will put it in a box, like below, to show that it is indeed code, and not part of the message.

    Code:
    <html>
    	<head>
    		<script>
    			function showTR(id)
    			{
    				if (document.getElementById && document.createTextNode)
    				{
    					var tr=document.getElementById(id);
    					if (tr) 
    					{
    						if (tr.style.display == 'none') 
    						{
    							// To make tr tags disappear
    							// we set display to none, as usual
    							// to make them appear again
    							// we set style to block for IE
    							// but for firefox we use table-row
    							try 
    							{
    								tr.style.display='table-row';
    							} 
    							catch(e) 
    							{
    								tr.style.display = 'block';
    							}
    							
    							var toggle = document.getElementById('displayToggle');
    							toggle.removeChild(toggle.firstChild);
    							toggle.appendChild(document.createTextNode('hide'));
    						}
    						else 
    						{
    							tr.style.display = 'none';
    							
    							var toggle = document.getElementById('displayToggle');
    							toggle.removeChild(toggle.firstChild);
    							toggle.appendChild(document.createTextNode('show'));
    						}
    					}
    				}
    			}
    
    </script>
    </head>
    
    <body>
    
    	<table width="350" height="24" border="0" cellpadding="0" cellspacing="0">
    		<tr>
    			<td>
    				<div align="center" class="heading">
    					Navigation 
    						<span class="paragraph">
    							[<a href="javascript:showTR('nav_toggle')" id="displayToggle">hide</a>]
    						</span>
    				</div>
    			</td>
    		</tr>
    	</table>
    
    	<div>
    		<table width="350" height="120" border="0" cellpadding="0" cellspacing="0">
    			<tr>
    				<td id="nav_toggle" valign="top">
    					<ol type="I" class="paragraph">
    						<li>
    							<div align="left" class="romanlist">
    								General Information
    							</div>
    						</li>
    						
    						<li>
    							<div align="left" class="romanlist">
    								Pharmacology and Pharmacokinetics
    							</div>
    				    </li>
    						
    						<li>
    							<div align="left" class="romanlist">
    								Side Effects
    							</div>
    						</li>
    						
    						<li>
    							<div align="left">
    								<span class="romanlist">
    									Suboxone/Subutex 
    								</span>
    								<ol type="a">
    									<li class="paragraph">
    										The Naloxone Myth
    									</li>
    									
    									<li class="paragraph">
    										Blocking Effects
    									</li>
    									
    									<li class="paragraph">
    										Miracle Pill?
    									</li>
    								</ol>
    							</div>
    						</li>
    						
    						<li>
    							<div align="left" class="paragraph">Withdrawal</div>
    						</li>
    					</ol>
    				</td>
    			</tr>
    		</table>
    	</div>
    
    	<p>
    		Pellentesque nec tellus vitae lacus euismod dapibus. Quisque at est id augue commodo convallis. Nunc nulla risus, nonummy sit amet, hendrerit non, euismod eget, justo. Sed enim ante, vestibulum sit amet, pulvinar vitae, tincidunt quis, urna. Aenean dolor mi, tempor ut, ullamcorper convallis, euismod non, libero. Ut vel orci. Vestibulum eu orci. Quisque tellus risus, sodales a, blandit ac, imperdiet in, quam. In ut ipsum a dui condimentum laoreet. Nulla facilisi. Nam vulputate, mi eu aliquam condimentum, justo eros elementum turpis, in consectetuer est tellus sed sem. Suspendisse velit. Nullam massa felis, luctus sed, volutpat non, vehicula ac, eros. Proin blandit tellus a tortor. Nunc vel dolor.
    		Nulla facilisi. Aliquam sit amet leo at ante viverra consequat. Cras rutrum dolor at mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque tellus volutpat neque. Sed turpis tortor, lacinia a, faucibus eu, volutpat quis, lectus. Curabitur at dolor non nisl sagittis posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sapien ante, consequat quis, bibendum a, auctor sed, massa. Aliquam a sapien. Suspendisse venenatis, enim a lacinia dapibus, enim elit ullamcorper augue, ac elementum nulla dolor sit amet quam. Donec aliquet orci vitae velit. Duis eleifend neque at lectus. Suspendisse potenti.
    		Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lobortis suscipit est. Ut tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sodales quam ac augue. Nullam placerat, lectus in commodo fermentum, sapien dolor faucibus dolor, ac dictum massa libero vitae turpis. Ut nibh. Pellentesque faucibus pellentesque ligula. Donec magna enim, convallis vitae, vulputate vitae, egestas iaculis, nibh. Donec massa augue, ultrices eget, ullamcorper quis, iaculis ut, quam. Suspendisse vel leo. Curabitur aliquam sapien ac turpis dictum euismod. Cras consequat lacus vel nunc. Ut metus. Nunc ante magna, suscipit eu, sagittis et, hendrerit at, magna. Aenean nunc quam, accumsan vitae, nonummy id, facilisis eu, mauris. Aliquam eu pede et augue mollis aliquam. Nulla venenatis ipsum quis ligula. In scelerisque ornare lorem.
    		Fusce magna risus, posuere ac, porttitor ut, ultrices in, nisi. Suspendisse magna leo, pulvinar et, congue a, iaculis eu, erat. Cras dui ligula, dictum ac, sollicitudin vitae, egestas tempus, magna. Aliquam erat volutpat. Pellentesque gravida tristique augue. Aenean id elit non tortor auctor cursus. Ut laoreet tortor. Praesent nisi. Nunc suscipit. Mauris et tortor sed tortor molestie fringilla. Vivamus tincidunt vehicula quam. Morbi dapibus magna ut massa.
    		Nulla aliquam nisi at justo. Nulla facilisi. Fusce tempor ligula hendrerit dolor. Quisque ligula. Morbi nunc. Praesent placerat augue a neque. Duis cursus sapien sit amet turpis. Curabitur sed risus. Sed cursus. Aliquam at tortor molestie nunc gravida molestie. Maecenas consequat magna a velit. Integer tortor quam, blandit feugiat, auctor id, condimentum vestibulum, leo. Suspendisse potenti. Aliquam in sapien a ante consectetuer aliquam. Nullam aliquam. Praesent vitae tellus. Ut vel velit in ante malesuada eleifend. Aenean ullamcorper suscipit tellus. Cras risus mauris, vehicula a, placerat sed, porta et, purus.
    	</p>
    
    	</body>
    </html>
    Last edited by 1212jtraceur; 11-04-2006 at 10:25 PM.

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice on posting, as well as the help w/ the code! All of it works great... I'm just trying to figure out Problem #1. I was thinking that some code that does a document.write and changes the size of the table on the page might work. When it is shown and hidden using the other method, the browser still considers the table to be present. Because the text is positioned relative to the table, when the vertical size of the table is reduced to zero the problem should be solved. Is my reasoning sound?

    -Chris (thatspoppycock.com)

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh no, not document.write! Look at the link in my previous post...display.none should effectively reduce the dimensions to 0 and make the element intangible. Try not using tables for layout. I'm not really sure if that's the problem, but I know it's not a good idea...

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still haven't figured it out, and ran into a new problem. After clicking the link a few times (4 to be exact), the alignment for the text "Navigation [show/hide]" gets all messed up. I posted a link below. Help!

    http://mywebpages.comcast.net/chriss...upe_fixing.htm

    ...and here is the Javascript I'm using:

    Code:
    function showTR(id)
    	{
    		if (document.getElementById && document.createTextNode)
    		{
    			var tr=document.getElementById(id);
    			if (tr) 
    			{
    			if (tr.style.display == 'none') 
    					{
    					// To make tr tags disappear
    					// we set display to none, as usual
    					// to make them appear again
    					// we set style to block for IE
    					// but for firefox we use table-row
    					try 
    					{
    						tr.style.display='table-row';
    					} 
    					catch(e) 
    					{
    						tr.style.display = 'block';
    					}
    					var toggle = document.getElementById('displayToggle');
    					toggle.removeChild(toggle.firstChild);
    					toggle.appendChild(document.createTextNode('hide'));
    					}
    					else 
    					{
    					tr.style.display = 'none';
    						
    					var toggle = document.getElementById('displayToggle');
    					toggle.removeChild(toggle.firstChild);
    					toggle.appendChild(document.createTextNode('show'));
    					}
    				}
    			}
    }
    -Chris (thatspoppycock.com)

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Perhaps the problem has to do with your changing a table cell’s display property value to table-row. I’m guessing that you meant to apply the ID nav_toggle to the table row element instead of a table cell element.

    I’m curious as to why you’re using a table element for the navigation at all though since it makes your HTML considerably more complex and doesn’t seem to be used to any advantage. Here’s some revised code. The JavaScript is a bit more complex because it is designed such that the toggle link is hidden when the visitor has JavaScript disabled. Live Example

    Code:
    CSS:
    * {
      margin: 0;
      padding: 0;
      }
    html {
      padding: 1em;
      font: 12px Georgia, "Times New Roman", Times, serif;
      }
    #navigation {
      width: 350px;
      padding: 0.5em 1em 0.5em;
      background-color: #ccc;
      text-align: center;
      }
    #navigation h1 {
      display: inline;
      font-size: 14px;
      font-weight: bold;
      }
    #navigation span {
      font-weight: bold;
      }
    #navigation ol {
      padding: 0.5em 0 0.5em 2em;
      list-style-type: upper-roman;
      text-align: left;
      }
    #navigation ol ol {
      padding: 0 0 0 2em;
      list-style-type: lower-alpha;
      }
    
    JavaScript\:
    var navContainer, navigation;
    function toggle(action) {
      var span = navContainer.getElementsByTagName("span");
      if (span[0]) navContainer.removeChild(span[0]);
      span = document.createElement("span");
      var anchor = document.createElement("a");
      anchor.setAttribute("href", "javascript:navToggle();");
      anchor.appendChild(document.createTextNode(action));
      span.appendChild(document.createTextNode(" ["));
      span.appendChild(anchor);
      span.appendChild(document.createTextNode("]"));
      navContainer.insertBefore(span, navigation);
      }
    function navToggle() {
      var status;
      if (navigation.currentStyle) status = navigation.currentStyle.display;
      else status = document.defaultView.getComputedStyle(navigation, "").getPropertyValue("display");
      status == "block" ? toggle("show") : toggle("hide");
      status == "block" ? navigation.style.display = "none" : navigation.style.display = "block";
      }
    window.onload = function() {
      navContainer = document.getElementById("navigation");
      navigation = navContainer.getElementsByTagName("ol")[0];
      toggle("hide");
      } 
    
    HTML:
    <div id="navigation">
      <h1>Navigation</h1>
      <ol>
        <li>General Information</li>
        <li>Pharmacology and Pharmacokinetics</li>
        <li>Side Effects</li>
        <li>Suboxone/Subutex
          <ol>
            <li>The Naloxone Myth</li>
            <li>Blocking Effects</li>
            <li>Miracle Pill?</li>
          </ol>
        </li>
        <li>Withdrawal</li>
      </ol>
    </div>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •