[CB] Tabulate main Page.

[Todge]

This code will add tabs across the top of your forum, clicking on a tab will open that particular category..

Totally rewritten to take into account empty categories and odd amounts of tabs. You can now also tell if a category has new posts without needing to open it.

Put it in your Main Footer..

<style type="text/css">
<!--
#tabtable { }
.tabtable { }
.tab { background-color: #AAAAAA; border: 1px solid black; padding: 2px;}
.tabnew { background-color: #654321; border: 1px solid black; padding: 2px;}
.tabover { background-color: #123456; border: 1px solid black; padding: 2px;}
.tabselect { background-color: #FDB975; border: 1px solid black; padding: 2px;}
.tabtext { color: #ffffff; }
-->
</style>

<table id="tabtable" width="100%" cellPadding="0" cellSpacing="0" border="0" style="display: none;">
<tbody>
<tr><td class="tabtable" id="tabtd" width="100%" colspan="5" align="center"></td></tr>
</tbody>
</table>

<script type="text/javascript">
<!--
/*
Tabulated Main Page
by Todge
Copyright © 2011
Please keep this header intact
*/

if(pb_action == 'home')
{
// Edit below...

var tabsPerRow = 3;
var hideTitleRow = 'no';

// Edit above...

var nav = document.getElementsByTagName('a');
var cats = new Array();
var boards = new Array();

function tabselect(thetab)
{
var cat = thetab.id.split('ctab')[1];
cat = 'board'+cat;

var chktabs = document.getElementById('tabtd').getElementsByTagName('td');
for(chk=0; chk<chktabs.length; chk++)
{
if(chktabs[chk].className == 'tabselect')
{
if(chktabs[chk].title)
{
chktabs[chk].className = 'tabnew';
}
else
{
chktabs[chk].className = 'tab';
}
break;
}}
thetab.className = 'tabselect';
thetab.onmouseout = function(){this.className = 'tabselect';}

var boards = forumTable.getElementsByTagName('a');
for(b=0; b<boards.length; b++)
{
if(boards[b].name == cat)
{
boards[b].parentNode.parentNode.style.display = '';
}
else if(boards[b].name.match(/board\d/))
{
boards[b].parentNode.parentNode.style.display = 'none';
}}

catTitle.innerHTML = thetab.getElementsByTagName('font')[0].innerHTML;
return;
}

// Find forum table, categories etc..

for(n=0; n<nav.length; n++)
{
if(nav[n].className == 'nav')
{
if(document.getElementById('fscroller'))
{
var forumTable = nav[n].parentNode.getElementsByTagName('table')[2];
}
else
{
var forumTable = nav[n].parentNode.getElementsByTagName('table')[0];
}
nav[n].parentNode.insertBefore(document.getElementById('tabtable'),forumTable);
document.getElementById('tabtable').style.display = '';
break;
}}
var td = forumTable.getElementsByTagName('td');

for(t=0; t<td.length; t++)
{
if(td[t].className == 'titlebg' && td[t].innerHTML.match(/Forum Name/))
{
var catTitle = td[t];
if(hideTitleRow.match(/y/i))
{
catTitle.parentNode.style.display = 'none';
}}
if(td[t].className == 'catbg' && td[t].align != 'right')
{
with(td[t]){
align='center';
style.cursor = 'pointer';
id = 'ctab'+cats.length;
className = 'tab';
getElementsByTagName('font')[0].className = 'tabtext';
getElementsByTagName('font')[0].color = '';
onclick = function(){tabselect(this,boards);}
onmouseover = function(){var omo=this.className; this.className='tabover'; this.onmouseout=function(){this.className=omo;}}
}
td[t].parentNode.style.display = 'none';
cats[cats.length] = td[t];
}
else if(td[t].className == 'windowbg' && td[t].width == '8%')
{
if(td[t].firstChild.alt == '[/li][li]')
{
cats[cats.length-1].title = 'There are new posts in this category';
cats[cats.length-1].className = 'tabnew';
}
boards[boards.length] = td[t].parentNode;
var boardname = document.createElement('a');
var board = cats.length-1;
boardname.name = 'board'+board;
td[t].appendChild(boardname);
}}

var tabRows = parseInt(cats.length/tabsPerRow);
var catcount = 0;

for(tR=0; tR<tabRows; tR++)
{
var table = document.createElement('table');
with(table){width="100%"; cellPadding="0"; cellSpacing="0"; border="0"}
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
for(tc=0; tc<tabsPerRow; tc++)
{
tr.appendChild(cats[catcount]);
cats[catcount].style.width = 100/tabsPerRow+'%';
cats[catcount].colSpan = '1';
catcount++;
}
tbody.appendChild(tr);
table.appendChild(tbody);
document.getElementById('tabtd').appendChild(table);
}
tabRows = cats.length-(tabRows*tabsPerRow);

if(tabRows > 0)
{
var table = document.createElement('table');
with(table){width=(100/tabsPerRow)*tabRows+"%"; cellPadding="0"; cellSpacing="0"; border="0"}
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
for(tc=0; tc<tabRows; tc++)
{
tr.appendChild(cats[catcount]);
cats[catcount].width = 100/tabRows+'%';
catcount++;
}
tbody.appendChild(tr);
table.appendChild(tbody);
document.getElementById('tabtd').appendChild(table);
}

var openTab = 0;
if(pb_action == 'home' && location.href.match(/index.cgi\??#(\w)/))
{
for(t=0; t<cats.length; t++)
{
if(cats[t].getElementsByTagName('a')[0].name == location.href.split(/#/)[1])
{
openTab = t;
break;
}}}
tabselect(cats[openTab]);
}
// -->
</script>

Edit this part of the code to give the tabs colors/effects..

<style type="text/css">
<!--
#tabtable { }
.tabtable { }
.tab { background-color: #AAAAAA; border: 1px solid black; padding: 2px;}
.tabnew { background-color: #654321; border: 1px solid black; padding: 2px;}
.tabover { background-color: #123456; border: 1px solid black; padding: 2px;}
.tabselect { background-color: #FDB975; border: 1px solid black; padding: 2px;}
.tabtext { color: #ffffff; }
-->
</style>

#tabletable and .tabtable are for the table holding the tabs, leaving them blank will mean the background table of the tabs is transparent.

.tab is the color of a normal tab.
.tabnew is the color of a tab if that category has new posts within it.
.tabover is the color of the tab when you hover your mouse over it.
.tabselect is the color of the currently selected tab.
.tabtext is for the text within the tabs. Anything added to this will apply to all tabs, no matter what you put in the class' above. If you want different text colors/styles for the tabs when hovered over etc., leave this blank and edit the above class' only.

Also, a little further down..

var tabsPerRow = 3;
var hideTitleRow = 'no';

tabsPerRow is the amount of tabs you want in each row.
hideTitleRow, if set to 'yes' the title row will be hidden.

You no longer need a board in each category for the code to work, and it will now take into account any odd tabs in the last row.