Help with Dynamically Tabbed Welcome Table

SuperChick
v5 Beta Tester

In a world of my own making.

Posts: 150

Help with Dynamically Tabbed Welcome Table Jan 18, 2017 12:03:06 GMT -8

Quote

Post by SuperChick on Jan 18, 2017 12:03:06 GMT -8

I recently had someone create a new skin for me and they included a 3 tab welcome table. I love it but I wanted to move some things around in the tabs. My content in the first 2 tabs work while the third tab "kills" the tab-able header and shows no content when clicked. I have used an html validator and fixed a lot of things, but it still is not functioning properly. The header belongs on my main board which has a recent makeover, so not all codes on the test board are the same. I don't think this is an issue since it is isolated in the main header, but I know I could be wrong. Any help is greatly appreciated!

acharmingstory.proboards.com/ Test Board
heroestherpg.proboards.com/ Board with new skin

Code:

<script type="text/javascript">

<!--

/*

* Dynamically Tabbed Welcome Table v2

* Generated by the DTT Generator

* Created By Jordan a.k.a. Triad

* support.proboards.com

*/

var DTT = {

selected:

{

id: "information",

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">



</style>

<table width="100%" align="center" cellspacing="1" cellpadding="0" class="bordercolor">

<tr id="pro_collapse" style="display:;">

<td width="100%" align="center" class="windowbg" valign="top">

<table width="70%" cellspacing="0" cellpadding="4">

<tr id="pro_tabs">



<td class="tabbgselected" onclick="DTT.toggleTab(this.id);" id="nav_information">Information</td>

<td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_staff">Staff n'Things</td>

<td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_credits" style="border-right: none;">Affiliates</td>

</tr>

<tr>



<td class="windowbg" id="pro_content" colspan="3" style="background-color: #eee;">

<div id="pro_information">

<center><font size="5"><b><font color=black>DISCOVER YOUR OWN EVOLUTION</font></b></font></center>

<table width="100%">

<tr>

<td style="width: 25%;">

<div class="zelda" style="margin-top: 0px;"><a href="http://heroestherpg.proboards.com/board/32">Rules</a></div>

<div class="zelda"><a href="http://heroestherpg.proboards.com/post/49019/thread">FAQ</a></div>

<div class="zelda"><a href="http://heroestherpg.proboards.com/post/155333">Plot</a></div>

</td>

<td style="width: 50%;">

<table width="100%">

<tr>

<td style="width: 50%; text-align: center; font-size: 14; font-family: Palatino;">

<p style="font-size:16px">RPG News:<br><a href="http://heroestherpg.proboards.com/thread/23745/january-1st-rpg-news">January 2017</a></p>

<hr>

<a href="http://heroestherpg.proboards.com/thread/22622/resurgence-media-releases">Resurgence: Media Reports</a><br>

<a href="http://heroestherpg.proboards.com/thread/22823/liberators-communications">Liberators Communications</a><br>

Read more in <a href="http://heroestherpg.proboards.com/board/50/media-reports">Media Mayhem</a>!<br>

</td>

<td style="width: 25%">

<div class="zelda" style="margin-top: 0px;"><a href="http://heroestherpg.proboards.com/thread/1615">Apply</a></div>

<div class="zelda"><a href="http://heroestherpg.proboards.com/post/118058/thread">Newbie Guide</a></div>

<div class="zelda"><a href="http://heroestherpg.proboards.com/thread/1617">Wanted Canons</a>

</div>

</td></tr></table>

</td></tr></table></div>

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

<table width="100%">

<tr>

<td style="width: 50%; text-align: left;">

<span style="font-size: 14px; font-family: Palatino; margin-left: 15px;">Boss Lady: <a href="http://heroestherpg.proboards.com/user/2">*no one special*</a></span><br><br>

<span style="font-size: 14px; font-family: Palatino; margin-left: 15px;">Managers: <a href="http://heroestherpg.proboards.com/user/70">quillkeeper</a>,

<a href="http://heroestherpg.proboards.com/user/180">aquarius</a>,

<a href="http://heroestherpg.proboards.com/user/34">heroesdreamer</a></span><br><br>

<span style="font-size: 14px; font-family: Palatino; margin-left: 15px;">Staff Assistant: <a href="http://heroestherpg.proboards.com/user/74">shava</a></span><br><br>

<span style="font-size: 14px; font-family: Palatino; margin-left: 15px;">The Wiki Guru: <a href="http://heroestherpg.proboards.com/user/3">47jamoo</a></span>

</td>

<td style="width:50%">

<div style="padding: 5px; text-align:center; font-size: 10px; margin-bottom: 5px;">CREDITS<br>

Graphics by NOS and Quillkeeper. All canon characters from various television universes © their creators. No © infringement intended; fan inspired fiction. All original characters, plots and stories have creative commons (©) by their creators. No reproduction of any original material is permitted without express written consent of its creator. Background Image © <a href="http://dinpattern.com/">Dinpattern</a>.

Autumn Rain Theme © Lachrymosa of Adoxography, for use on Heroes the RPG only.

</div>

</td></tr></table>

</div>

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

<table width="100%">

<tr>

<td style="width: 80%">

<marquee behavior=scroll direction="left">

<a href="http://www.marvelheroesrpg.proboards.com/" Target="_blank"><img src="http://i89./k207/stephnboise/Marvel/marvel_banner_smcopy.gif" width="88" height="31" border="0" alt="Marvel Heroes RPG"></a>

<a href='http://weekenders.b1.jcink.com'><img src='http://i95./l156/pinkrevolvers/weekenders/wwbutton2.jpg' width="88" height="31" border="0" alt="Weekend Warriors"></a>

<a href="http://warriorcatsrpg.com" target="_blank" title="Warrior Cats"><img src="http://i251./gg308/wynnyelle/new_button2.jpg" width="88" height="31" border="0" alt="Warrior Cats"></a>

<a href="http://ghabc.proboards.com/" target="_blank"><img src="http://i45.tinypic.com/2cpu654.jpg" width="88" height="31" border="0" title="BLEEDING LOVE"></a>

<a href="http://dancingwithfire.boards.net/index.cgi"><img src="http://img./v312/worstlilangel187/Bobby.jpg" width="88" height="31" border="0" alt="dancingwithfire"></a>

<a href="http://www.worlddestiny.proboards.com/" target="_blank"><img src="http://i262./ii94/worlddestiny/Heroes%20Light/Mini%20Banners/button2.jpg" border="0" height="31" width="88" alt="World Destiny"></a>

<a href="http://rewind.b1.jcink.com/index.php?act=idx" target="_blank"><img src="http://i55.tinypic.com/1zokglx.png" width="88" height="31" border="0" alt="Skip The Rewind"/></a>

<a href="http://dcunitedwestand.proboards.com/" target="_blank"><img src="http://storage.proboards.com/3246047/i/Q2EfLOzcksayVeEqDI0n.gif" border="0" height="31" width="88" alt="DC: United We Stand"></a>

<a href="http://believeinheroes.proboards.com" target="_blank"><img src="http://i1153./p511/bihgraphics/bihaff32.png" border="0" height="31" width="88" alt="X-Men/Avengers Roleplay"></a>

<a href='http://alteredgenesis.jcink.net/' target="_blank"><img src='http://alteredgenesis.b1.jcink.com/uploads/alteredgenesis/alteraffy.png' border="0" height="31" width="88" alt="X:AG"></a>

</marquee>

</tr>

</table>

</div> </td>

</tr>

</table>

</tr> </table>

<script type="text/javascript">



</script>

<br>

[/code]

Chris
ProBoards Coder

Official Code Helper

"'Oops' is the sound we make when we improve"

Posts: 8,853

Help with Dynamically Tabbed Welcome Table Jan 20, 2017 23:11:53 GMT -8 Jordan likes this

Quote

Post by Chris on Jan 20, 2017 23:11:53 GMT -8

The test forum is in maintenance mode and I assume that is where you are trying out the changes you mention so without access I'm not sure how much help can be offered.
The posted code is an old code from Proboards version 4 and a V5 plugin was created to replace that code. Jordan maybe able to speak to this since it is his code but there might be a few conflicts with that old code that might not be readily identified, plus in a plugin container the code becomes much more user-friendly by eliminating direct code editing and instead offer fill-this-in and select-this-option configurations.

Give the plugin a try especially if you're looking to make changes, it should be easier than directly trying to edit coding

Every day, coders are looking for new ways to kill bugs. Think you've got what it takes?

"To fight the bug, we must first understand the bug. "

[would you like to know more?]

Jordan
Moderator

What is truth?

Posts: 11,838

Help with Dynamically Tabbed Welcome Table Jan 21, 2017 10:30:23 GMT -8 Chris and elli like this

Quote

Post by Jordan on Jan 21, 2017 10:30:23 GMT -8

Yes, the code you are using was built for version 4, so I highly recommend using the v5 plugin instead.

You'll notice in the v4 code you are using that it references several CSS classes that no longer exist, such as bordercolor and windowbg. You would have to create all of these yourself, but if you use the new plugin, it will use the v5 CSS classes.

SuperChick
v5 Beta Tester

In a world of my own making.

Posts: 150

Help with Dynamically Tabbed Welcome Table Jan 21, 2017 15:44:34 GMT -8

Quote

Post by SuperChick on Jan 21, 2017 15:44:34 GMT -8

I utilized the new plugin on my test board. Turns out that the tables within the tabs had too many <tr> divisions and was messing up the code in both scenarios. I've been able to work it out from there. Thanks for the advice.