[CB] Tri-Image Sticky Splitter

[Scorpian]

<script type='text/javascript'>
/* Tri-Image Sticky Splitter by Scorpian
http://roddyinnovations.com */

/*=== Edit These ===*/
var hImg = 'URL_OF_HEAD_IMAGE.gif'; // The url of your head image
var hHeight = '25'; // The height of the head image

var cImg = 'URL_OF_CENTER_IMAGE.gif'; // The url of the image the boards will be overlayed on

var bImg = 'URL_OF_BASE_IMAGE.gif'; // The url of your base image
var bHeight = '10'; // The height of your base image

var sWidth = '90%'; // The width of the overlayed table
var gHeight = '20'; // The height of the gap between the categories

var cNames = ['Important Topics','Normal Topics']; // Names of the tables

/*=== No Touchy! ===*/
var riTable = document.getElementsByTagName('table');
var theMainTable = document.createElement('table');
with(theMainTable){
cellSpacing = 0;
cellPadding = 0;
border = 0;
align = 'center';
width = '100%';
insertRow(0).insertCell(0);
insertRow(-1).insertCell(0);
insertRow(-1).insertCell(0);
}
with(theMainTable.rows[0].cells[0]){
style.backgroundImage = 'url(' + hImg + ')';
style.backgroundPosition = 'bottom';
style.backgroundRepeat = 'no-repeat';
className = 'headimage';
height = hHeight;
}
var theSecondTable = document.createElement('table');
with(theSecondTable){
cellSpacing = 1;
cellPadding = 4;
border = 0;
align = 'center';
width = sWidth;
className = 'bordercolor';
appendChild(document.createElement('tbody'));
}
with(theMainTable.rows[1].cells[0]){
style.backgroundImage = 'url(' + cImg + ')';
style.backgroundPosition = 'center';
style.backgroundRepeat = 'repeat-y';
appendChild(theSecondTable);
}
with(theMainTable.rows[2].cells[0]){
style.backgroundImage = 'url(' + bImg + ')';
style.backgroundPosition = 'top';
style.backgroundRepeat = 'no-repeat';
height = bHeight;
}
var gapDiv = document.createElement('div');
gapDiv.style.height = gHeight + 'px';
if(location.href.match(/board=/i) && !location.href.match(/action=/i)){
for(a=0; a<riTable.length; a++){
if(riTable[a].rows[0].cells[0].className == 'titlebg' && riTable[a].rows[1] && riTable[a].rows[1].cells[0].className == 'catbg'){
if(riTable[a].rows[0].cells[0].colSpan == 8){ break; }
var stickies = false; var anyTopics = false;
riTable[a-1].style.backgroundColor = 'transparent';
var newCellA = riTable[a-1].insertRow(-1).insertCell(0);
var newCellB = riTable[a-1].insertRow(-1).insertCell(0);
newCellA.appendChild(theMainTable.cloneNode(true));
newCellA.appendChild(gapDiv.cloneNode(true));
newCellB.appendChild(theMainTable.cloneNode(true));
var tbodA = newCellA.firstChild.rows[1].cells[0].firstChild.firstChild;
var tbodB = newCellB.firstChild.rows[1].cells[0].firstChild.firstChild;
tbodA.appendChild(riTable[a].rows[1].cloneNode(true));
tbodB.appendChild(riTable[a].rows[1].cloneNode(true));
tbodA.parentNode.rows[0].cells[2].firstChild.firstChild.innerHTML = cNames[0];
tbodB.parentNode.rows[0].cells[2].firstChild.firstChild.innerHTML = cNames[1];
for(b=0; b<riTable[a].rows.length; b++){
if(riTable[a].rows[b].cells[0] && riTable[a].rows[b].cells[0].className == 'windowbg2' && riTable[a].rows[b].cells[1] && riTable[a].rows[b].cells[1].className == 'windowbg2'){
if(riTable[a].rows[b].cells[0].innerHTML.match(/sticky/i) && riTable[a].rows[b].cells[2] && !riTable[a].rows[b].cells[2].innerHTML.match(/Announcement:/i)){
var word = '<font size="2">Sticky:</font> '; var isStick = true; var stickies = true;
}else if(riTable[a].rows[b].cells[2].innerHTML.match(/Announcement:/i)){
var word = ''; var isStick = true; var stickies = true;
}else{
var word = ''; var isStick = false; var anyTopics = true;
}
riTable[a].rows[b].cells[2].innerHTML = word + riTable[a].rows[b].cells[2].innerHTML;
if(isStick){
tbodA.appendChild(riTable[a].rows[b].cloneNode(true));
}else{
tbodB.appendChild(riTable[a].rows[b].cloneNode(true));
}
riTable[a].rows[b].style.display = 'none';
}
}
tbodA.appendChild(riTable[a].rows[0].cloneNode(true));
tbodB.appendChild(riTable[a].rows[0].cloneNode(true));
riTable[a-1].rows[0].style.display = 'none';
if(stickies || anyTopics){
newCellA.style.display = (stickies) ? '' : 'none';
newCellB.style.display = (anyTopics) ? '' : 'none';
}else{
newCellA.style.display = 'none';
var nCell = tbodB.parentNode.insertRow(1).insertCell(0);
nCell.className = 'windowbg'; nCell.align = 'center';
nCell.colSpan = 7; nCell.style.fontStyle = 'italic';
nCell.style.fontSize = '12px';
nCell.appendChild(document.createTextNode('There are no topics in this board.'));
}
break;
}
}
}
</script>

This code will work exactly like my dual-image sticky splitter, only this one is tri-image. The look that you'll get will be that of what my tri-image category splitter gives you. For those still perplexed, refer to this screenshot of what it looks like:
roddyinnovations.com/pbhacks/previews/tristickysplit.jpg

Yeah, I used the images from Revampd 2 since I didn't want to waste my time making new ones.

Anyways, this code can go in either your global or board footers, depending on where you want it to show up. Editing can get a little frantic, but I think I explained it fairly well in the code itself.

hImg is the url of your head image. hHeight is the height of that image

cImg is the url of the image that the table will be overlayed onto. It'll repeat to fill the gap.

bImg is the url of your base image. bHeight is the height of that image.

sWidth is the width of the table that will have the threads in it. It's the table that is overlayed onto the center image. gHeight is the height of the gap between the two tables.

cNames consists of two words. The first word is the title of the table for stickied and announcement threads. The second word is the title for the table with the normal threads.

If you have any questsions, ask don't pm. Enjoy, blap. Yadda dribble blapple greeble yap.

Oh, yeah. It's cross browser, as usual. Tested in FF 1.5 & IE 6.