Dynamic Tabs

[NetMaster]

Stream, as well as changing the classes you'll need to go through and change the function names in the script as well as the variable names. Just an example:

toggleTab: function(id)
{
var newID = id.substr(4);

Just add a number to each one in only one copy of the script.

toggleTab1: function(id)
{
var newID1 = id.substr(4);

[Streamstrider]

I am very scared I'm going to mess up the entire thing, but I'll give it a shot. XD Thanks!

[Streamstrider]

Aaaaaand . . . . I suck. XD

[NetMaster]

Okay try this out:
But I'm about 70% sure it's not going to show anything. Might have to get Wormo to look at it.

<script type="text/javascript">
<!--

/*
*    Dynamically Tabbed Welcome Table v2
*    Generated by the DTT1 Generator
*    Created By Jordan a.k.a. Triad
*    [url]http://support.proboards.com[/url]
*/

var DTT1 = {

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

   $: function(id)
   {
       if(id)
           return document.getElementById(id);
       return false;
   },

   init: function()
   {
       var tCookie1 = this.getCookie();

       if(tCookie1.tab)
       {
           this.toggleTab1(tCookie1.tab);
       }

       if(tCookie1.show == "0")
       {
           this.$("pro_collapse").style.display = "none";
       }
   },

   setCookie1: function(tab, show)
   {
       var tTab1 = "";
       var tShow1 = "";
       var tCookie1 = this.getCookie();

       if(tab)
           tTab1 = tab;
       else
           tTab1 = (tCookie1.tab) ? tCookie1.tab : this.selected.id;

       if(show)
           tShow1 = show;
       else
           tShow1 = (tCookie1.show) ? tCookie1.show : "1";

       document.cookie = "DTT1Data=tab=" + encodeURI(tTab1) + "|show=" + encodeURI(tShow1) + ";expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
   },

   getCookie: function()
   {
       if(document.cookie.match(new RegExp("DTT1Data=(.+?)($|;)","gi")))
       {
           var data1 = decodeURI(RegExp.$1);

           return {
               tab: data1.split("=")[1].split("|")[0],
               show: data1.split("=")[2]
           };
       }

       return false;
   },

   toggleTab1: function(id)
   {
       var newID1 = id.substr(4);

       if(this.selected.id != newID1 && this.$(id))
       {
           if(this.$("nav_" + this.selected.id))
           {
               this.$("nav_" + this.selected.id).className = "tabbg";
               this.$("pro_" + this.selected.id).style.display = "none";
           }

           this.selected.id = newID;
           this.$("nav_" + this.selected.id).className = "tabbgselected";
           this.$("pro_" + this.selected.id).style.display = "";

           this.setCookie(id, false);
       }
   },

   toggleTable1: function()
   {
       if(this.$("pro_collapse").style.display == "")
       {
           this.$("pro_collapse").style.display = "none";
           this.setCookie(false, "0");
       }
       else
       {
           this.$("pro_collapse").style.display = "";
           this.setCookie(false, "1");
       }
   },

   toggleListItem1: function(id, name)
   {
       if(this.selected.listItem[id])
       {
           if(this.selected.listItem[id].name == name)
           {
               if(this.selected.listItem[id].object.style.display == "")
               {
                   this.selected.listItem[id].object.style.display = "none";
                   this.$("pro_" + id + "_default").style.display = "";
               }
               else
               {
                   this.$("pro_" + id + "_default").style.display = "none";
                   this.selected.listItem[id].object.style.display = "";
               }
               return true;
           }
           else
               this.selected.listItem[id].object.style.display = "none";
       }

       this.selected.listItem[id] = {
           name: name,
           object: this.$("pro_" + id + "_" + name)
       };

       this.$("pro_" + id + "_default").style.display = "none";
       this.selected.listItem[id].object.style.display = "";
   }
};

//-->
</script>

<style type="text/css">
<!--

.tabbg {
   background-color: #DFE3E7;
   border-bottom: 1px solid #D0D6DC;
   border-right: 1px solid #D0D6DC;
   color: #8995A4;
   padding-top: 3px;
   padding-bottom: 3px;
   height: 30px;
}

.tabbgselected {
   background-color: #EEF0F2;
   border-bottom: 1px solid #D0D6DC;
   color: #97A2AF;
   padding-top: 3x;
   padding-bottom: 3px;
   height: 30px;
}

#nav_tab10 {
   border-bottom: 0px solid #D0D6DC;
}

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

#pro_tabs td {
   width: 25%;
}

#pro_content {
   color: #2B3856;
   background-color: #EEF0F2;
   font-size: 10px;
   text-align: left;
   padding: 10px;
}

-->
</style>

<table width="900px" align="center" cellspacing="1" cellpadding="0" class="bordercolor">
   <tr id="pro_collapse" style="display:;">
       <td width="20%" align="center" class="windowbg" valign="top">
           
<table width="100%" cellspacing="0" cellpadding="4">
   <tr id="pro_tabs">
       <td class="tabbg" onclick="DTT1.toggleTab(this.id);" id="nav_tab6"><b><center><font size=1><font face=georgia>FANTASY<face></size></center></b>
       </td>
   </tr>
   <tr>
       <td class="tabbg" onclick="DTT1.toggleTab(this.id);" id="nav_tab7"><b><center><font size=1><font face=georgia>REAL LIFE<face></size></center></b>
       </td>
   </tr>
   <tr>
       <td class="tabbg" onclick="DTT1.toggleTab(this.id);" id="nav_tab8"><b><center><font size=1><font face=georgia>CANON<face></size></center></b>
       </td>
   </tr>
   <tr>
       <td class="tabbg" onclick="DTT1.toggleTab(this.id);" id="nav_tab9"><b><center><font size=1><font face=georgia>NON-RPG<face></size></center></b>
       </td>
   </tr>
   <tr>
       <td class="tabbg" onclick="DTT1.toggleTab(this.id);" id="nav_tab10"><b><center><font size=1><font face=georgia>RESOURCE<face></size></center></b>
       </td>
   </tr>
</table>
               
       </td>
       <td width="80%" class="windowbg" id="pro_content">
           

<div id="pro_tab6" style="display: none;">
<div style="width: 100%; height: 120px; overflow: auto;">
Test Content
</div>  
</div>

<div id="pro_tab7" style="display: none;">
<div style="width: 100%; height: 120px; overflow: auto;">
Test Content
</div>
</div>

<div id="pro_tab8" style="display: none;">
<div style="width: 100%; height: 120px; overflow: auto;">
Test Content
<br>
</div>
</div>

<div id="pro_tab9" style="display: none;">
<div style="width: 100%; height: 120px; overflow: auto;">
Test Content
<br>
</div>
</div>

<div id="pro_tab10" style="display: none;">
<div style="width: 100%; height: 120px; overflow: auto;">
Test Content
<br>
</div>
</div>

       </td>
   </tr>
</table>
<script type="text/javascript">
<!--

DTT1.init();

//-->
</script>


[Wormopolis]

they are both dynamic tables?

[Streamstrider]

Yes, both are dynamic tables.

[Streamstrider]

And, yes, Master, they're not clickable. XD

[Wormopolis]

k.. hold on.. might just have to change the ids of the second table. dont change any function names.

[Streamstrider]

Know how to work it yet? XD

[Wormopolis]

set them both to regular DTT tables. they currently have "2" modifiers on the first table. I think I can make the second table only apply to itself, but the functions all have to be named correctly.

[Streamstrider]

So take the "2" off of all the variables as well? Should I keep them on the IDs?

[Wormopolis]

make the tables just like they were after you generated them.

[Streamstrider]

I do believe I was able to change everything back. I kept a few id/class changes for CSS purposes but otherwise the script should be the same as before.

[Streamstrider]

WOOT! It seems to be working! *glomps Wormo*

[Wormopolis]

I just needed a clean slate to start from. be well soon