[CB] Tabulate Main Page V2

[Todge]

This will create tabs for your boards. Each category will have a set of tabs down the left hand side, that, when clicked on, will display that board to the right.

It goes in your Main Footer..

<style type="text/css">
<!--
.boardtabs { background-color: blue; width: 150px; }
.lpcell { border: 1px solid blue; background-color: yellow; }
.boardlist{ background-color: red; }
.tabbutton { cursor: pointer; border: 1px solid #aaaaaa; padding: 2px; background-color: black; color: white;  filter: alpha(opacity=70); opacity: .7;}
.buttonspacer { height: 3px; font-size: 0px;}

#generalchat { background-color: aaaaaa; background-image: url(URL OF IMAGE); background-repeat: no-repeat; background-position: center center; }
-->
</style>


<script type="text/javascript">
<!--
/*
Tabbed Boards (main page)
by Todge
Copyright © 2011
Please keep this header intact
*/


// Edit below...

var min_board_height = 80;

// Edit above...

var tabheight = 15;
var catBar = document.getElementsByTagName('td');

function tabCat(cat)
{
var catId = cat.firstChild.name;
cat=cat.parentNode;
var newTR = document.createElement('TR');
var newTD = document.createElement('TD');
with(newTD){colSpan = 5; className = 'boardbar'; style.padding = 0;}
newTR.appendChild(newTD);

var table = document.createElement('TABLE');
with(table){width='100%'; cellPadding=2; cellSpacing=0;}
var tbody = document.createElement('TBODY');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
with(td1){className='boardtabs'; id=catId; vAlign='top';}
var td2 = document.createElement('TD');
var td2div = document.createElement('DIV');
with(td2div){style.overflow = 'auto'; style.height=min_board_height;}
var lpdiv = document.createElement('DIV');
lpdiv.className = 'lpcell';
with(td2){className = 'boardlist';appendChild(lpdiv); appendChild(td2div); vAlign='top';}

tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
table.appendChild(tbody);
newTD.appendChild(table);

cat.parentNode.insertBefore(newTR,cat.nextSibling);

var bcount = 0;

while(newTR.nextSibling && newTR.nextSibling.firstChild.className == 'windowbg')
{
bcount++;
newTR = newTR.nextSibling;
newTR.style.display = 'none';
var div = document.createElement('div');
with(div){className = 'tabbutton'; innerHTML = '<b>'+newTR.firstChild.nextSibling.getElementsByTagName('b')[0].innerHTML+'</b>';
title = 'Topics: '+newTR.firstChild.nextSibling.nextSibling.firstChild.innerHTML;
title += ' \nPosts: '+newTR.firstChild.nextSibling.nextSibling.nextSibling.firstChild.innerHTML;
}

if(newTR.firstChild.firstChild.alt == '[/li][li]')
{
div.innerHTML += ' <font size="1">[new]</font>';
}
newTR.firstChild.nextSibling.id=div.firstChild.innerHTML;
div.onclick = function(){
lpdiv.innerHTML =  '<font size="1">Last post </font>'+document.getElementById(this.firstChild.innerHTML).parentNode.lastChild.innerHTML.replace(/<br>/ig,' ');
td2div.innerHTML = document.getElementById(this.firstChild.innerHTML).innerHTML;}

if(spacer)
{
td1.appendChild(spacer);
}
else
{
lpdiv.innerHTML = '<font size="1">Last post </font>'+newTR.lastChild.innerHTML.replace(/<br>/ig,' ');
td2div.innerHTML = newTR.firstChild.nextSibling.innerHTML;
}


td1.appendChild(div);
var spacer = document.createElement('div');
spacer.className = 'buttonspacer';
}

if(bcount*tabheight > min_board_height)
{
td2div.style.height = bcount*(tabheight+6);
}
return;
}


for(c=catBar.length-1; c>1; c--)
{
if(catBar[c].className == 'catbg' && catBar[c].colSpan == 5 && catBar[c].align != 'right')
{
tabCat(catBar[c]);
}}

// -->
</script>


Now for the editting..

In the code itself, find this variable at the top..

var min_board_height = 50;

The red number is the minimum height allowed for your board information, if you have enough boards in a catergory to exceed this, then it will be stretched to fit.

You can style the way the whole thing looks in the style-sheet at the top...

.boardtabs { background-color: blue; width: 150px;}
.lpcell { border: 1px solid blue; background-color: yellow; }
.boardlist{ background-color: red; }
.tabbutton { cursor: pointer; border: 1px solid #aaaaaa; padding: 2px; background-color: black; color: white; filter: alpha(opacity=70); opacity: .7;}
.buttonspacer { height: 3px; font-size: 0px;}

#generalchat { background-color: aaaaaa; background-image: url(URL OF IMAGE); background-repeat: no-repeat; background-position: center center; }

.boardtabs is the cell on the left containing the tabs. This is generic and will effect all tab cells.

.lpcell is the cell containing the Last Post information.

.boardlist is the cell to it's right, where the boards will be displayed.

.tabbutton is the tab itself.

.buttonspacer is for the gap between the buttons. Just edit the height if need-be.

If you want to make the tab cell look differently on any of your categories, you can by using this format..

#generalchat

where 'generalchat' is the one word ID you gave to the category when you created it. Make sure you have these at the BOTTOM of the stylesheet, otherwise they'll be overidden by the boardtabs style.