|
Post by Streamstrider on Nov 12, 2011 16:32:39 GMT -8
Okay, so this is what I'm using for the table in my footer: ( streamtesting.proboards.com/index.cgi )
<script type="text/javascript"> <!--
/* * Dynamically Tabbed Welcome Table v2 * Generated by the DTT Generator * Created By Jordan a.k.a. Triad * [url]http://support.proboards.com[/url] */
var DTT = {
selected: { id: "welcome", listItem: {} },
$: function(id) { if(id) return document.getElementById(id); return false; },
init: function() { var tCookie = this.getCookie();
if(tCookie.tab) { this.toggleTab(tCookie.tab); }
if(tCookie.show == "0") { this.$("pro_collapse").style.display = "none"; } },
setCookie: function(tab, show) { var tTab = ""; var tShow = ""; var tCookie = this.getCookie();
if(tab) tTab = tab; else tTab = (tCookie.tab) ? tCookie.tab : this.selected.id;
if(show) tShow = show; else tShow = (tCookie.show) ? tCookie.show : "1";
document.cookie = "DTTData=tab=" + encodeURI(tTab) + "|show=" + encodeURI(tShow) + ";expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;"; },
getCookie: function() { if(document.cookie.match(new RegExp("DTTData=(.+?)($|;)","gi"))) { var data = decodeURI(RegExp.$1);
return { tab: data.split("=")[1].split("|")[0], show: data.split("=")[2] }; }
return false; },
toggleTab: function(id) { var newID = id.substr(4);
if(this.selected.id != newID && 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); } },
toggleTable: 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"); } },
toggleListItem: 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="DTT.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="DTT.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="DTT.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="DTT.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="DTT.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"> <!--
DTT.init();
//--> </script>
The problem is that I have another table in the header, and they seem to connect to each other (as in, when one tab is selected in one table, it deselects all tables in the other table). I tried changing the ids and some classes and such to get them to be different, but apparently it just hates me, like everything else, because I can't figure out at all how to separate them!
Any ideas?
|
|
|
Post by Wormopolis on Dec 1, 2011 18:50:52 GMT -8
in the second copy of the code, change this
var DTT = {
to this
var DTT2 = {
then in all of the tabs in the HTML (for the SECOND table ONLY) where it has onclick="DTT.toggleTab(this.id);"
change it to
onclick="DTT2.toggleTab(this.id);"
that should hopefully keep the 2 entities seperate
|
|
|
Post by Wormopolis on Dec 9, 2011 23:17:26 GMT -8
in both variables (DTT and DTT2) there are 2 functions called
getcookie and setcookie
in the SECOND copy, replace
DTTData
with
DTT2Data
that should help keep the cookies seperate
|
|
|
Post by Streamstrider on Dec 12, 2011 20:23:21 GMT -8
:3 Thanks so much! Works awesomely now. *hugs*
|
|
|
Post by Wormopolis on Dec 13, 2011 20:42:56 GMT -8
now I have proof that its possible to have two DTT on the same page.
|
|