Simple Problem

Hi, can someone please post some sample html/css/maybe js(don't know if it's needed)? where there is a left menu where upon clicking a header/div the right side displays the associated html table? For example, say I have a pizza menu on a website:

Code:

Left Menu: To the right of the menu, by default the table describing toppings for Cheesy will be displayed: Supreme combo Mozarella Honolulu Hawaiian Parmesan Waikiki Hawaiin Romano Tons of meat Vegetarian Vegan Gluten Free Cheesy

Upon clicking one of the pizza names in the left menu, it's toppings will be displayed. For example, clicking Tons of meat will replace the toppings for Cheesy:

Code:

Left Menu: Supreme combo Pepperoni Honolulu Hawaiian Sausage Waikiki Hawaiin Meatball Tons of meat Bacon Vegetarian Vegan Gluten Free Cheesy

Sorry the spacing in this post isn't coming out right, I don't know how to preserve spacing such that there are two columns, the left being the menu and the right being the toppings table. Thanks in advance!

Generally you'd use some JavaScript for this. There are lots of scripts out there for tabbed content for example, which can be adapted to this purpose. Here is a demo that I just made up:

http://pageaffairs.com/code-archive/tabs/

Here are some links to other tab scripts that could be similarly adapted:

http://www.pmob.co.uk/temp/twotabs.htm
http://phrogz.net/JS/Tabtastic/#overview
http://www.visibilityinherit.com/cod...-tabs-demo.php

There are also more elaborate slideshow scripts that do similar things, but I'd go with the tabs solution.

You can do it with CSS alone, but it's not neceaasrily supported in older browsers. For example, this one that uses :target is quite nice:

http://daniel.glazman.free.fr/weblog...le.html#others

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)

Quote:

<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">
<div id="Tab1" class="contentWrapper">
<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>
</div>
<div id="Tab2" class="contentWrapper">
<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>
<div id="Tab3" class="contentWrapper">
<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>
<div id="Tab4" class="contentWrapper">
<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>
<div id="Tab5" class="contentWrapper">
<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>
<div id="Tab6" class="contentWrapper">
<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:

Quote:

#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:
1. 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.
2. 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?
3. 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)?
4. How do I make the left hand tabs longer?
5. 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.

Quote:

Originally Posted by WebProducer

1. 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.

They aren't for me, but it's probably because there is a delay while the JS loads. Not much you can do about that, except hide them also with CSS and modify the JS to account for that.

Quote:

2. 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?

That's a question for a JS person. You could try the version of the code in my example. You would probably want to fade the whole contentWrapper div, rather than just the table.

Quote:

3. 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)?

Not sure what you mean there. That's not what I'm seeing in my browser (Chrome). Can you post a screen shot and indicate what browser you are using?

Quote:

4. How do I make the left hand tabs longer?

What does longer mean? Width, height, or ...?

Quote:

5. A table might have 500 rows, but what if there are only like 15 tabs? ... The only way I can imagine doing this is by using frames so that the tabs have their own scroll bar ...

A better option is to set a height on the contentWrapper divs and set them to overflow: auto, which will cause scroll bars to appear if that element has a lot of content in it. Then the user can scroll to the content within that div, and never lose sight of the tabs.