|
bar1
Jan 26, 2012 22:08:58 GMT -4
Post by MonsterControl on Jan 26, 2012 22:08:58 GMT -4
<script type="text/javascript"> <!--
/* * Dynamically Tabbed Welcome Table v2 * Generated by the DTT Generator * Created By Jordan a.k.a. Triad * http://support.proboards.com */
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: #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; }
#pro_tabs td, #pro_sidebar td { font-size: 10pt; font-weight: bold; text-align: center; }
#pro_tabs td { width: 25%; cursor: pointer; }
#pro_content { font-size: 10pt; text-align: left; padding: 10px; }
#pro_threads { font-size: 10pt; font-weight: bold; line-height: 1.5em; text-align: left; }
--> </style>
<table width="92%" align="center" cellspacing="1" cellpadding="0" class="bordercolor"> <tr> <td class="titlebg" align="center" colspan="2" style="padding: 4px; cursor: pointer;" onclick="DTT.toggleTable();"> <font size="2"> SaintJohnPublic </font> </td> </tr> <tr id="pro_collapse" style="display:;"> <td width="70%" align="center" class="windowbg" valign="top"> <table width="100%" cellspacing="0" cellpadding="4"> <tr id="pro_tabs"> <td class="tabbgselected" onclick="DTT.toggleTab(this.id);" id="nav_welcome">Welcome</td> <td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_tips">Tips</td> <td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_tabcolor">TabColor</td> <td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_staff" style="border-right: none;">Staff</td> </tr> <tr> <td class="windowbg" id="pro_content" colspan="4"> <div id="pro_welcome"> <p>Welcome To <b><i>SaintJohnPublic</i></b>!</p> <br>Lol Tis Is Funny<br> </div> <div id="pro_tips" style="display: none;"> <div style="width: 100%; height: 130px; overflow: auto;"> <p>A lot of people have wanted to know how to make each tab or one of the tabs have a fixed height so that the content will scroll and prevent the table's height from increasing and decreasing between tabs. To do this, you just have to put a division element like the one below in each of your tabs with the same height.</p> <div style="margin: 20px;"> <div style="width: 100%; height: <strong>130</strong>px; overflow: auto;"><br /> <span style="margin-left: 20px;">All of the tab's content goes here.</span><br /> </div> </div> Note that in this generator on the list tabs you can only insert the code around each item's content and not the entire cell. If you want the div placed around the entire cell, you'll have to do that by hand which is not difficult. Once you have generated your code, just search for the tab's content and place the opening and closing divs shown above around everything, but be sure to put it within the tab's main division element like below. <div style="margin: 20px;"> <div id="pro_<strong>tabID</strong>"><br /> <span style="margin-left: 20px;"><div style="width: 100%; height: <strong>130</strong>px; overflow: auto;"></span><br /> <span style="margin-left: 40px;">All of the tab's content goes here.</span><br /> <span style="margin-left: 20px;"></div></span><br /> </div> </div> </div> </div> <div id="pro_tabcolor" style="display: none;"> <div style="width: 100%; height: 130px; overflow: auto;"> When you insert this table into your forum, you will notice that all of the table except for the tabs will take your forum's default colors. I kept the tabs from inheriting from other classes to keep things simple and to not have any confusion. What you need to modify is the CSS shown below which will be generated for you.<br /><br /> .tabbg {<br /> background-color: #dadada;<br /> border-bottom: 1px solid #000000;<br /> border-right: 1px solid #000000;<br /> }<br /><br /> .tabbgselected {<br /> background-color: #efefef;<br /> border-bottom: 1px solid #efefef;<br /> border-right: 1px solid #000000;<br /> }<br /><br /> 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.<br /><br /> If you have more than one skin with different colors, you can use Javascript to print the correct skin colors with this method.<br /><br /> <script type="text/javascript"><br /> <!--<br /><br /> if(pb_skinid == 1){<br /> document.write(<br /> "<style type='text/css'>" +<br /> ".tabbg {" +<br /> "background-color: #dadada;" +<br /> "border-bottom: 1px solid #000000;" +<br /> "border-right: 1px solid #000000;" +<br /> "}" +<br /> ".tabbgselected {" +<br /> "background-color: #efefef;" +<br /> "border-bottom: 1px solid #efefef;" +<br /> "border-right: 1px solid #000000;" +<br /> "}" +<br /> "</style>"<br /> );<br /> } else if(pb_skinid == 2){<br /> document.write(<br /> "<style type='text/css'>" +<br /> ".tabbg {" +<br /> "background-color: #dadada;" +<br /> "border-bottom: 1px solid #000000;" +<br /> "border-right: 1px solid #000000;" +<br /> "}" +<br /> ".tabbgselected {" +<br /> "background-color: #efefef;" +<br /> "border-bottom: 1px solid #efefef;" +<br /> "border-right: 1px solid #000000;" +<br /> "}" +<br /> "</style>"<br /> );<br /> }<br /><br /> //--><br /> </script><br /> </div> </div> <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','admin');"><font size="2">Admin</font></a> :: <a href="Javascript:void(0);" onclick="DTT.toggleListItem('staff','saintjohnpublic');"><font size="2">SaintJohnPublic</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_admin" style="display: none;"> <p><b>Name:</b> Admin</p> <p><b>Forum Rank:</b> Administrator</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_saintjohnpublic" style="display: none;"> <p><b>Name:</b> Michael</p> <p><b>Forum Rank:</b> Moderator</p> <div style="margin-left: 10px;"> <p>Hi, I'm a moderator on this forum.</p> <p>Bla Bla Bla.</p> </div> </div> </div> </td> </tr> </table> </td> <td width="30%" class="windowbg" valign="top"> <table width="100%" cellspacing="0" cellpadding="4"> <tr id="pro_sidebar"> <td align="center" class="tabbg" style="border-right: none;"> Important Links </td> </tr> <tr> <td class="windowbg" valign="top"> <div id="pro_threads"> <a href="/">Section Header</a> <div style="margin: 5px 0px 0px 20px;"> - <a href="/">Link One</a><br /> - <a href="/">Link Two</a><br /> - <a href="/">Link Three</a><br /> - <a href="/">Link Four</a><br /> - <a href="/">Link Five</a><br /> - <a href="/">Link Six</a> </div> </div> </td> </tr> </table> </td> </tr> </table>
<script type="text/javascript"> <!--
DTT.init();
//--> </script>
|
|