Thanks for replying. I was playing around with jquery and I’m about 50% there with this code but I need to make some adjustments and have some questions with this code -
The html(jquery embedded in script tag)
<html>
<head>
<title>JQuery Test</title>
<link rel=“stylesheet” type=“text/css” href=“fade.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=“text/javascript”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(“a.fadingTab”).click(function () {
$(“.active”).removeClass(“active”);
$(this).addClass(“active”);
$(“.contentText”).fadeOut(700);
setTimeout(function(){ $(“.contentWrapper”).hide(); }, 700);
var content_show = $(this).attr(“title”);
setTimeout(function(){ $(“#”+content_show).show(); }, 700);
setTimeout(function(){ $(“.”+content_show).hide().fadeIn(700); }, 700);
});
});
</script>
</head>
<body>
<div id=“container”>
<br />
<br />
<div id=“tabsContainer”>
<div id=“tabsWrapper”>
<ul id=“tabs”>
<li><a href=“#Tab1” title=“Tab1” class=“fadingTab active”>Link 1</a></li>
<li><a href=“#Tab2” title=“Tab2” class=“fadingTab”>Link 2</a></li>
<li><a href=“#Tab3” title=“Tab3” class=“fadingTab”>Link 3</a></li>
<li><a href=“#Tab4” title=“Tab4” class=“fadingTab”>Link 4</a></li>
<li><a href=“#Tab5” title=“Tab5” class=“fadingTab”>Link 5</a></li>
<li><a href=“#Tab6” title=“Tab6” class=“fadingTab”>Link 6</a></li>
</ul>
</div>
<div id="contentContainer">
[B]<div id="Tab1" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">4</td>
<td class="tcDesc">row 4</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">5</td>
<td class="tcDesc">row 5</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">6</td>
<td class="tcDesc">row 6</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">7</td>
<td class="tcDesc">row 7</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">8</td>
<td class="tcDesc">row 8</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">9</td>
<td class="tcDesc">row 9</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">10</td>
<td class="tcDesc">row 10</td>
<td></td>
<td></td>
</tr>
</table>
[B]</div>[/B]
[B]<div id="Tab2" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">4</td>
<td class="tcDesc">row 4</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">5</td>
<td class="tcDesc">row 5</td>
<td></td>
<td></td>
</tr>
</table>
</div>
[B]<div id="Tab3" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">4</td>
<td class="tcDesc">row 4</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">5</td>
<td class="tcDesc">row 5</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">6</td>
<td class="tcDesc">row 6</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">7</td>
<td class="tcDesc">row 7</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">8</td>
<td class="tcDesc">row 8</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">9</td>
<td class="tcDesc">row 9</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">10</td>
<td class="tcDesc">row 10</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">11</td>
<td class="tcDesc">row 11</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">12</td>
<td class="tcDesc">row 12</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">13</td>
<td class="tcDesc">row 13</td>
<td></td>
<td></td>
</tr>
</table>
</div>
[B]<div id="Tab4" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">4</td>
<td class="tcDesc">row 4</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">5</td>
<td class="tcDesc">row 5</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">6</td>
<td class="tcDesc">row 6</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">7</td>
<td class="tcDesc">row 7</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">8</td>
<td class="tcDesc">row 8</td>
<td></td>
<td></td>
</tr>
</table>
</div>
[B]<div id="Tab5" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
</table>
</div>
[B]<div id="Tab6" class="contentWrapper">[/B]
<table>
<tr>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
<th>HEADING</th>
</tr>
<tr class="odd">
<td class="tcNum">1</td>
<td class="tcDesc">row 1</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">2</td>
<td class="tcDesc">row 2</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">3</td>
<td class="tcDesc">row 3</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">4</td>
<td class="tcDesc">row 4</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">5</td>
<td class="tcDesc">row 5</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">6</td>
<td class="tcDesc">row 6</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">7</td>
<td class="tcDesc">row 7</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">8</td>
<td class="tcDesc">row 8</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">9</td>
<td class="tcDesc">row 9</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">10</td>
<td class="tcDesc">row 10</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">11</td>
<td class="tcDesc">row 11</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">12</td>
<td class="tcDesc">row 12</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">13</td>
<td class="tcDesc">row 13</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">14</td>
<td class="tcDesc">row 14</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">15</td>
<td class="tcDesc">row 15</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td class="tcNum">16</td>
<td class="tcDesc">row 16</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td class="tcNum">17</td>
<td class="tcDesc">row 17</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<br /><br /><br /><br />
<div id="footer">
<p class="footer">Footer Text | Blah | Blah </p>
</div>
</div>
</body>
</html>
And here is the css:
#tabsContainer {
width:40em;
margin:0 auto;
}
#tabsWrapper {
width:8em;
float:left;
}
#tabs {
list-style:none;
font-size:.9em;
font-weight:bold;
text-align:center;
}
.fadingTab {
text-decoration:none;
color:#201f1f;
display:block;
padding:.75em 0;
margin:0 0 1em 0;
border-radius:.5em 0 0 .5em;
background-color:rgba(116, 116, 116, 0.6);
}
.fadingTab:hover {
color:#878787;
background-color:rgba(75, 75, 75, 0.6);
}
.active {
color:#bababa;
background-color:rgba(32, 31, 31, 0.6);
}
.contentWrapper {
width:32em;
min-height:17em;
margin:0 0 0 8em;
padding:1em 0;
border-radius:0 1em 1em 1em;
background-color:rgba(32, 31, 31, 0.6);
}
#Tab2, #Tab3, #Tab4, #Tab5, #Tab6 {
display:none;
}
Questions:
- When you first load the page, why are the contents of following “Link 1” and “Link 6” both shown? I only want the contents of “Link 1” shown.
- When I click on the different links in the side menu, why aren’t the tables fading in and out like the jquery effect should do? If it is impossible to fade out tables and I have to show the table immediately, can you post some sample code that does this without javascript/jquery?
- How do I make it so that the gray background div(that is behind the tables) stops exactly at the HORIZONTAL edges of the table(note right now the left side is noticeably jutting out into the background of the tabs)?
- How do I make the left hand tabs longer?
- A table might have 500 rows, but what if there are only like 15 tabs? Upon clicking a tab and scrolling to the bottom of the table I don’t want to have to scroll all the way up to click on other tabs. I therefore should make my tabs independent of my tables. The only way I can imagine doing this is by using frames so that the tabs have their own scroll bar. This would enable me to scroll all the way down to the 490th row of a table and then not have to scroll much, if at all, in the tabs frame to navigate to another table. However, I think I remember reading that frames were deprecated in css or aren’t w3c compliant, not to mention they are ugly.
If someone could post some sample code that addresses these issues so that I can continue learning I would appreciate it very much. Thank you all.