[CB] Dynamically Tabbed Table

[Jordan]

If you are working on a version 5 forum, use the plugin version of the code here: DTT v5 Plugin

---

This table looks like a normal Proboard's welcome table, but it has "tabs" at the top which you can click on to open up specific information. This way you can have tons of information all in one table. It has memory so if you collapse the table or like having a specific tab kept open it will stay that way. It also works with multiple skins, can have unlimited tabs (although they may get squished up if you have too many), and has a hide/show list feature within the tabs which allows you to compact your data even more.

Since so many people have been having trouble with this code, I've created a generator which puts it together for you.

Generator
Backup Generator

If none of the generators are up, please send me a private message so I can get one up.

The editing instructions are in my next post, but I highly recommend skipping the "Adding Tabs" section and just using the generator.

Default Source

[Jordan]

I'll cover the basics of editing the table here, but if you have any questions please make a thread in code support.

CSS

.tabbg {
      background-color: #dadada;
      border-bottom: 1px solid #000000;
      border-right: 1px solid #000000;
}

.tabbgselected {
      background-color: #efefef;
      border-bottom: 1px solid #efefef;
      border-right: 1px solid #000000;
}

These two classes determine how a tab will behave when it is and isn't selected. The second class which has the word "selected" in it is the class for when the tab is selected. I like to have this class' background color and bottom border color the same as the windowbg class' background color (Admin > Skins / Forum Colors > Modify Skin > Window Background 1) so that the tab appears to be "connected" with the content below.

#pro_tabs td, #pro_sidebar td {
      font-size: 10pt;
      font-weight: bold;
      text-align: center;
}

This part is for styling the tab and sidebar title text.

#pro_content {
      font-size: 10pt;
      padding: 10px;
}

This part is for styling the tab content text.

#pro_threads {
      font-size: 10pt;
      font-weight: bold;
      line-height: 1.5em;
      text-align: left;
}

This part is for the right hand column titled by default as "Important Threads". You don't have to have this so feel free to remove that column along with the CSS shown above. Just be sure to change the colspan in the line below to 1 if you choose to do this without the generator.

<td class="titlebg" align="center" colspan="2" style="padding: 4px; cursor: pointer;" onclick="DTT.toggleTable();">

If you have more than one skin, I suggest making a separate copy of the CSS for each skin and hosting it on a remote website. If you don't know how to do this, make a thread in code support.

Adding Tabs

It is recommended that you skip this section and just use the generator in the first post to create your tabs.

To add a tab, just add one of the lines shown below to the table in the above post (after this line towards the top: <tr id="pro_tabs">). For the ID, be sure to place "nav_" in front of it followed by a unique word/number that you will use later.

<td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_welcome">Welcome</td>

Then add the bold text for the last tab only.

id="nav_staff" style="border-right: none;">Welcome</td>

Note that one tab needs to be selected by default, so give whichever tab you choose the class name of "tabbgselected" instead of "tabbg". Also, find this line in the Javascript code and enter the same ID excluding the "nav_" part.

selected: {
      id: "welcome",
      listItem: {}
},

Once you know how many tabs you are going to use you need to edit a two things. First, go back up to the CSS we were editing above, and change the width to 100 divided by the total amount of tabs you have. So if you have two tabs, 100 / 2 = 50%.

#pro_tabs td {
      width: 50%;
      cursor: pointer;
}

Next, find this line a few lines down from where you previously added your tabs above, and set the colspan attribute to the number of tabs you have.

<td class="windowbg" colspan="2">

Directly below this line is where the content goes, and all you need to do is add what is below and edit the ID by using the same ID you used for the tab above except that you place "pro_" in front of the ID instead of "nav_".

<div id="pro_welcome" style="display: none;">
      <p>Welcome to <b><i>Your Site Name</i></b>!</p>
      <p>We appreciate your visit to us. Please take the time to browse through and <a href="/index.cgi?action=register">register</a> if you're interested in us.</p>
      <p>We hope you enjoy your stay,<br /><span style="margin-left: 20px;"></span>Your Site Name Management and Moderation Team.</p>
</div>

Please note that the number one error that people make when putting this table together is invalid nesting. Make sure all of your HTML tags (<td>, <div>, etc.) are correctly lined up. I highly recommend editing this in a text editor such as notepad.

[Jordan]

In the preview in my first post you probably noticed the "Characters" and "Staff" sections which have links that you can click on to display different information. I've put this together so you can see what you need to use for the tab's content if you for some reason cannot use the generator.

The ID that you chose for the section needs to be used where all the bold words are.

<div id="pro_staff" style="display: none;">

      <p style="text-align: center; font-weight: bold; margin: 10px;">
            <a href="Javascript:void(0);" onclick="DTT.toggleListItem('staff','charlie')"><font size="2">Charlie</font></a> ::
            <a href="Javascript:void(0);" onclick="DTT.toggleListItem('staff','triad')"><font size="2">Triad</font></a>
      </p>

      <div id="pro_staff_default" style="text-align: center; margin-top: 35px; display:;">
            Click on a staff name above to read about them.
      </div>

      <div id="pro_staff_charlie" style="display: none;">
            <p><b>Name:</b> Staff Name</p>
            <p><b>Forum Rank:</b> Administrator</p>
            <p><b><i>Your Site Name</i> Rank:</b> Forum Founder</p>

            <div style="margin-left: 10px;">
                  <p>Hi, I'm the staff member who founded this forum.</p>
                  <p>Another paragraph here.</p>
            </div>
      </div>

      <div id="pro_staff_triad" style="display: none;">
            <p><b>Name:</b> Triad</p>
            <p><b>Forum Rank:</b> Moderator</p>
            <p><b><i>Your Site Name</i> Rank:</b> First Assistant</p>

            <div style="margin-left: 10px;">
                  <p>Hello, my name is Triad and I'm the first assistant at this forum.</p>
            </div>
      </div>
</div>

If this is still confusing to you then feel free to make a thread about it.