Category Tab

[Isa The Great]

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

Put it in your Main Footer..

Code:
<style type="text/css">
<!--
.tab { background-color: #AAAAAA; }
.tabhovver { background-color: #123456; }
.tabselect { background-color: #654321; }
-->
</style>
<table class="bordercolor" id="tabTable" width="100%" cellPadding="0" cellSpacing="1" border="0"><tbody><tr id="tabtr"></tr></tbody></table>
<script type="text/javascript">
<!--
/*
Tabulate Main Page
by Todge
Copyright © 2009
Please keep this header intact
*/

if(location.href.match(/\.com\/(index.cgi(\?)?)?(action=home)?$/))
{
//Edit below.....

var tabAmount = 3;

// Edit above.....

var tabCount = 0;

// Find catagories and create tabs..

function tabselect(clicky)
{
for(c=0; c<catCount; c++)
{
document.getElementById('cat'+c).className = 'tab';
}
clicky.className = 'tabselect';
clicky.onmouseout = function(){this.className = 'tabselect';}
var catName = document.getElementsByTagName('a');
for(l=0; l<catName.length; l++)
{
if(catName[l].name.match(/^cat(\d)+$/))
{
catName[l].parentNode.parentNode.style.display = 'none';
}}
catName = document.getElementsByName(clicky.id);
for(l=0; l<catName.length; l++)
{
catName[l].parentNode.parentNode.style.display = '';
}
return;
}

if(typeof(fContent) != 'undefined')
{
fCheck = 'News';
}
else
{
fCheck = 'Forum Name';
}
var tabBoard = new Array();
var td = document.getElementsByTagName('td');
var tabs = document.getElementById('tabtr');
catCount = 0;
for(t=0; t<td.length; t++)
{

// Add tabs..
if(td[t].className.match(/^(news)?titlebg$/) && td[t].innerHTML.match(fCheck))
{
var newTR = document.createElement('tr');
var newTD = document.createElement('td');
newTD.id = 'theTabs';
newTD.colSpan = '5';
newTD.style.padding = '0';
newTR.appendChild(newTD);
td[t].parentNode.parentNode.insertBefore(newTR,td[t].parentNode);
t++;
}

if(td[t].className == 'catbg' && td[t].colSpan == '5' && td[t].align != 'right')
{
td[t].id = 'cat'+catCount;
td[t].align = 'center';
td[t].colSpan = '1';
td[t].style.cursor = 'pointer';
td[t].className = 'tab';
td[t].onclick = function(){tabselect(this);}
td[t].onmouseover = function(){
var mOut = this.className;
this.className = 'tabhovver';
this.onmouseout = function(){this.className = mOut;}}
td[t].parentNode.style.display = 'none';
var boardTR = td[t].parentNode.nextSibling;
tabs.appendChild(td[t]);

tabCount++;

if(tabCount == tabAmount)
{
var newTabTr = document.createElement('TR');
tabs.parentNode.appendChild(newTabTr);
tabs = newTabTr;
tabCount = 0;
}

// Find and tag boards..
while(boardTR.firstChild.className == 'windowbg')
{
boardTR.firstChild.innerHTML += '<a name="cat'+catCount+'"></a>';
if(boardTR == boardTR.parentNode.lastChild)
{
break;
}
boardTR = boardTR.nextSibling;
}
catCount ++;
}}

// Set width of tags..
var setWidth = document.getElementById('tabTable').getElementsByTagName('td');
for(s=0; s<setWidth.length-1; s++)
{
setWidth[s].width = parseInt(100/setWidth.length)+'%';
}
document.getElementById('theTabs').appendChild(document.getElementById('tabTable'));
tabselect(document.getElementById('cat0'));
}
// -->
</script>


Edit this part of the code with the colors you want the tabs to be..

.tab { background-color: #AAAAAA; }
.tabhovver { background-color: #123456; }
.tabselect { background-color: #654321; }


Also, a little further down..


var tabAmount = 3;


The number is the amount of tags you want in each row.

You need at least one board in each category for the code to work correctly, if you leave a category empty, there is nothing for the code to create a tab for.