2 Replies - 1225 Views - Last Post: 11 March 2013 - 04:13 AM

#1 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Making table appear only on the second tab.

Posted 11 March 2013 - 02:58 AM

How can I make the table at the bottom of my page appear only at the bottom of the second tab instead of all the tabs.

<html>
    <head>
	<title>Apricot Consulting Group</title>
    <link type="text/css" rel="stylesheet" href="apricot.css"/>
    <script type="text/javascript">
    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }
      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    </script>
  </head>

<body onload="init()">

        	<p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>

<ul id="tabs">
	<li><a href="#aboutus">About Us</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#resources">Resources</a></li>
	<li><a href="#computers">Computers</a></li>
</ul>

<div class="tabContent" id="aboutus">

<h1>About Us</h1>
	<div>
	<p>Apricot  Recruitment is a privately owned recruitment consultancy that
has been providing effective business solutions to organisations
throughout the UK.  At Apricot Recruitment we help find rewarding
temporary and permanent jobs for the job seeker, as well as provide
companies with highly skilled and motivated staff.  Our specially
trained consultants will find high quality candidates that match your
specific requirements. Clients and Candidates alike appreciate the
personal service we offer. Independent status means we always work in
the best interest of our customers and are therefore able to offer
complete flexibility of service. Each assignment is treated
individually in order to match both the client and candidates
requirements.</p>



</div>

		

</div>



<div class="tabContent" id="services">

<h1>Services</h1>

<div>

<p>Successful companies are built by successful people. Your company
needs the most talented, ambitious and determined individuals in order
to thrive. However, tracking down the ideal candidate can be
challenging.  We at Apricot Recruitment help you find that ideal
candidate.</p>

<p>By using our services you are able to outsource all your recruitment
needs to a single recruitment partner who oversees the entire supply
chain.  With an in depth knowledge of London Business, Apricot
Recruitment is ideally placed to help you locate and attract the best
possible candidates for your business. We specialise in going the
extra mile to find exactly the candidate to suit your business. Using
industry contacts and numerous research methods, we know precisely
where to look for your desired person.</p>

<p>The first step in recruiting the right candidates for your company is
learning about your business requirements, we thoroughly question,
evaluate and pre-interview all candidates before recommending only the
most appropriate for interview. This ensures you receive the very best
person for your role.</p>

<p>The Apricot Recruitment team uses a range of tools to source the best
possible talent.  These tools include:</p>



<ul>
<li>Extensive online and internal database searching.</li>
<li>Advertising in Premium Mediums.</li>
<li>Skills Assessment.</li>
<li>Headhunting.</li>
<li>Reference Checking.</li>
</ul>


</div>
</div>

<div class="tabContent" id="resources">

<h1>Resources</h1>

<div>

<p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>


</div>
</div>



<div class="tabContent" id="computers">

<h1>Computers</h1>

	<p>Lots of computers.</p>
	<div>

<div id="DivPhotoGalleryFX"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
 var flashvars = {};
 var params = {};
 params.base = "";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("PhotoGalleryFX.swf", "DivPhotoGalleryFX", "935", "300", "9.0.0", false, flashvars, params);


</script>
	

</div>


</div>




</body>


<center>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</center>


</html>





body {
	background-color: black;
}


h1 {
	font-family: times new roman;
	color: black;
	font-weight: bold;
}

p {

	font-family: times new roman;
	color: black;
}

ul {
	font-family: times new roman;
	color: black;
}

img.center {

display: block;
margin-left: auto;  
margin-right: auto; 

}

 body { font-size: 90%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.5em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: black; background-color: goldenrod; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      div.tabContent { border: 30px solid #c9c3ba; padding: 0.5em; background-color: goldenrod; }
      div.tabContent.hide { display: none; }





Is This A Good Question/Topic? 0
  • +

Replies To: Making table appear only on the second tab.

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6064
  • View blog
  • Posts: 23,519
  • Joined: 23-August 08

Re: Making table appear only on the second tab.

Posted 11 March 2013 - 03:13 AM

Why is the table outside of the body of the page?

Stick the table in a div, give the div an id, set the div's CSS to "display: none;" and only show it (change the div's CSS to "display: block;") if the second tab is selected.
Was This Post Helpful? 0
  • +
  • -

#3 apricot123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-October 12

Re: Making table appear only on the second tab.

Posted 11 March 2013 - 04:13 AM

View PostJackOfAllTrades, on 11 March 2013 - 03:13 AM, said:

Why is the table outside of the body of the page?

Stick the table in a div, give the div an id, set the div's CSS to "display: none;" and only show it (change the div's CSS to "display: block;") if the second tab is selected.



I don't quite understand the second part of the comment - "and only show it (change the div's CSS to "display: block;") if the second tab is selected." - I don't know how to do this. I have attached the html and css of what I have tried to do following your advice. Could you please give a little more detail in your advice.



<html>
    <head>
	<title>Apricot Consulting Group</title>
    <link type="text/css" rel="stylesheet" href="apricot.css"/>
    <script type="text/javascript">
    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }
      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    </script>
  </head>

<body onload="init()">

        	<p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>

<ul id="tabs">
	<li><a href="#aboutus">About Us</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#resources">Resources</a></li>
	<li><a href="#computers">Computers</a></li>
</ul>

<div class="tabContent" id="aboutus">

<h1>About Us</h1>
	<div>
	<p>Apricot  Recruitment is a privately owned recruitment consultancy that
has been providing effective business solutions to organisations
throughout the UK.  At Apricot Recruitment we help find rewarding
temporary and permanent jobs for the job seeker, as well as provide
companies with highly skilled and motivated staff.  Our specially
trained consultants will find high quality candidates that match your
specific requirements. Clients and Candidates alike appreciate the
personal service we offer. Independent status means we always work in
the best interest of our customers and are therefore able to offer
complete flexibility of service. Each assignment is treated
individually in order to match both the client and candidates
requirements.</p>



</div>

		

</div>



<div class="tabContent" id="services">


<h1>Services</h1>

<div>

<p>Successful companies are built by successful people. Your company
needs the most talented, ambitious and determined individuals in order
to thrive. However, tracking down the ideal candidate can be
challenging.  We at Apricot Recruitment help you find that ideal
candidate.</p>

<p>By using our services you are able to outsource all your recruitment
needs to a single recruitment partner who oversees the entire supply
chain.  With an in depth knowledge of London Business, Apricot
Recruitment is ideally placed to help you locate and attract the best
possible candidates for your business. We specialise in going the
extra mile to find exactly the candidate to suit your business. Using
industry contacts and numerous research methods, we know precisely
where to look for your desired person.</p>

<p>The first step in recruiting the right candidates for your company is
learning about your business requirements, we thoroughly question,
evaluate and pre-interview all candidates before recommending only the
most appropriate for interview. This ensures you receive the very best
person for your role.</p>

<p>The Apricot Recruitment team uses a range of tools to source the best
possible talent.  These tools include:</p>



<ul>
<li>Extensive online and internal database searching.</li>
<li>Advertising in Premium Mediums.</li>
<li>Skills Assessment.</li>
<li>Headhunting.</li>
<li>Reference Checking.</li>
</ul>


</div>
</div>

<div id="table">

<center>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</center>

</div>


<div class="tabContent" id="resources">

<h1>Resources</h1>

<div>

<p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>


</div>
</div>



<div class="tabContent" id="computers">

<h1>Computers</h1>

	<p>Lots of computers.</p>
	<div>

<div id="DivPhotoGalleryFX"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
 var flashvars = {};
 var params = {};
 params.base = "";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("PhotoGalleryFX.swf", "DivPhotoGalleryFX", "935", "300", "9.0.0", false, flashvars, params);


</script>
	

</div>


</div>




</body>





</html>






body {
	background-color: black;
}


h1 {
	font-family: times new roman;
	color: black;
	font-weight: bold;
}

p {

	font-family: times new roman;
	color: black;
}

ul {
	font-family: times new roman;
	color: black;
}

img.center {

display: block;
margin-left: auto;  
margin-right: auto; 

}

 body { font-size: 90%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.5em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: black; background-color: goldenrod; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      div.tabContent { border: 30px solid #c9c3ba; padding: 0.5em; background-color: goldenrod; }
      div.tabContent.hide { display: none; }
	div.table {display:none;}
	div.table.show {display: block;} 



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1