Tabbed Tables in Posts

[Wormopolis]

browsers tested: IE, FF and Chrome
placement: global footer


This code allows you to put a tabbed table in a post that will organize content. lots of class names included for CSS madness!


<style = "text/css">
.PT_table {width: 90%; border: #000000 1px solid;}
.PT_table_header {text-align: center; font-weight:bold; font-size:20px;}
.PT_tabs {text-align:center; background-color: #4444CC}
.PT_tabs_selected {text-align:center; background-color: #9999CC}
.PT_tabs_hover {text-align:center; background-color: #44CC44}
.PT_tabs_selected_hover {text-align:center; background-color: #44CC44}
.PT_spots {background-color:#222222;}
</style>

<script type="text/javascript">
<!--
//  Tabbed Tables in posts
//  v1.5
//  By Wormopolis - [url]www.wormocodes.com[/url]
//  keep header intact - do not repost

//  surround all content with [PTabbedContent]  [/PTabbedContent]
//  optional Table name using [PTabbedContent=Table Name]

//  surround each tab content with [PTab=Tab Name]  [/PTab]

var maxTabsAcross=3;
var openFirstTabByDefault=true;

(function(){
if (pb_action.match(/display|recent|search2/)) {
 var loopbreaker=0, tablecount=0;
 for (td=document.getElementsByTagName('td'), tt=0; tt<td.length; tt++) {
   if (td[tt].width=='80%' && td[tt].className.match(/windowbg/) && td[tt].vAlign=='top' && td[tt].innerHTML.match(/\[PTabbedContent/) && !td[tt].innerHTML.match(/\[norunubbc\]/)) {
     var newTabTable=td[tt].innerHTML.replace(/\n/g,'').match(/\[PTabbedContent(=(.*?))?\](.*?|\n)\[\/PTabbedContent\]/m);
     var PT_Title = (newTabTable[1] ? newTabTable[2] : '');
     var PT_content = newTabTable[3].split('[/PTab]');  if (!PT_content[PT_content.length-1].match(/\[PTab\]/)) PT_content.pop();
     var PT_tabs_final='<table width="100%"><tr>';
     var PT_final='<table class="PT_table"><tr>'+ (PT_Title ? '<td class="PT_table_header">' + PT_Title + '</td></tr><tr>' : '')+'<td>replaceLater</td></tr>';
     for (tb=0; tb<PT_content.length; tb++) {
       var temp=PT_content[tb].match(/\[PTab=(.*?)\]/);
       var PT_tabName= temp[1];  PT_content[tb]=PT_content[tb].replace(/\[PTab=(.*?)\]/,'');
       var temp2=100 / (parseInt(PT_content.length<maxTabsAcross ? PT_content.length : maxTabsAcross));
       PT_tabs_final+='<td ' + (tb==0 ? 'id="firstTab'+tablecount+'"' : '') + ' class="PT_tabs" name="PT_tabs" width="' + temp2 + '%" onmouseover="this.className=this.className+\'_hover\';" onmouseout="this.className=this.className.replace(\'_hover\',\'\');" onclick="PT_tabSelect(this);">' + PT_tabName + '</td>';
       if ((tb+1)%maxTabsAcross==0) PT_tabs_final += '</tr><tr>';
       PT_final+='<tr id="' + PT_tabName.replace(/\s+?/g,'') + '" style="display:none" class="PT_spots"><td>' + PT_content[tb] + '</td></tr>';
     }
     PT_tabs_final+='</tr></table>';
     PT_final+='</table>';
     PT_final=PT_final.replace('replaceLater',PT_tabs_final);
     td[tt].innerHTML=td[tt].innerHTML.replace(/\n/g,'').replace(/\[PTabbedContent(=(.*?))?\](.|\n)*?\[\/PTabbedContent\]/m,PT_final);
     tt--;
     if ((loopbreaker++)>10) {alert('infinite loop again'); break;}
     if (openFirstTabByDefault) PT_tabSelect(document.getElementById('firstTab'+tablecount));
     tablecount++;
   }
 }
}
})();
function PT_tabSelect(selected_tab) {
 keepthis=selected_tab.parentNode.parentNode;
 for (pt_tabs=keepthis.getElementsByTagName('td'), wtb=0; wtb<pt_tabs.length; wtb++) {
   pt_tabs[wtb].className='PT_tabs';
 }
 selected_tab.className='PT_tabs_selected';
 keepthis=keepthis.parentNode.parentNode.parentNode.parentNode;
 var tempname=selected_tab.innerHTML.replace(/\s+?/g,'');
 pt_spots= keepthis.getElementsByTagName('tr');
 for (pts=0; pts<pt_spots.length; pts++) {
   if (pt_spots[pts].className && pt_spots[pts].className=='PT_spots') pt_spots[pts].style.display='none';
 }
 document.getElementById(tempname).style.display='';
}
// -->
</script>




Preview: wormocodes.com/index.cgi?action=display&board=ttip&thread=1504

[Wormopolis]

version update 1.2: now works in IE and has variable for opening first tab by default.

[Wormopolis]

version update 1.3: fixed bug that occured for multiple tables in a thread.

[Wormopolis]

If anyone has ideas for UBBC button tray images, Im open to suggestion

[hitotsumami]

Hi, I'm having a problem with this code.

The 2nd tab has what I typed in it, but then it repeats the info in the first tab and the third tab.

I've tested this code with simple information in each tab, like a single line of text. However, when I use a lot of information, multiple lines of text, using mutliple bold, italics, underlines, and colors, it gives me that weird glitch where the 2nd tab repeats the 1st and 3rd tab informations.

If you need any information, let me know.

[Wormopolis]

does the demo page do the same thing for you? can you give me a link to your post?

[hitotsumami]

The live preview demo doesn't give me the same problem. Here is a link to the post I'm having trouble with: mangablast.proboards.com/index.cgi?action=display&board=oprules&thread=93&page=1

It is the first post on that thread. As you can see, the Pirates tab and the 3rd Party tabs are fine. The 2nd tab however, the Marines tab, has a strange mixture of the two others, and I have no idea why.

[Wormopolis]

Im looking now. you may have found a bug I wasnt aware of...

[Wormopolis]

version update 1.5: bug fix that hitotsunami found, as well as added a class for the sections content appears in. also fixed the bug that caused all tables on page to hide content if any tabs were selected in a different table.

[hitotsumami]

Thanks so much, it works great now!

Awesome code

[Wormopolis]

thank you for the help!