Post by $©Ø®Þ!@Ω™ on Aug 19, 2006 2:46:20 GMT
<style type='text/css'>
.headbg{
text-align: center;
}
</style>
<script type='text/javascript'>
/* DOM Category Splitter Final by Scorpian
Do not repost/redistribute without permission
http://roddyinnov.proboards75.com */
/*=== Edit These ===*/
var vars = []; // Do not edit this line
vars['head'] = [
'URL_OF_HEAD_IMAGE', // URL of the head image
'25' // Height of the head image
];
vars['base'] = [
'URL_OF_BASE_IMAGE', // URL of the base image
'25' // Height of the base image
];
vars['prefs'] = [
'25', // Height of split between categories
'yes', // Show Forum Name bar? "yes" or "no" only
'yes', // Show Mark-As-Read bar? "yes" or "no" only
'1' // Splitter type. '1' for image above/below categories. '2' for head image to become catbg
];
/*=== Do Not Edit ===*/
var riTable = document.getElementsByTagName('table');
if(location.href.match(/action=home$/i) || !location.href.match(/(action|board)=/i)){
for(a=0; a<riTable.length; a++){
if(riTable[a].cellSpacing == 1 && riTable[a].cellPadding == 4 && riTable[a].rows[0].cells[0].innerHTML.match(/Forum\sName/i)){
riTable[a-1].style.backgroundColor = 'transparent';
var newCell = riTable[a-1].insertRow(-1).insertCell(0);
var forumName = riTable[a].rows[0].cloneNode(true);
for(b=0; b<riTable[a].rows.length; b++){
if(riTable[a].rows[b].cells[0].colSpan == 5 && riTable[a].rows[b].cells[0].align != 'right'){
var headTab = document.createElement('table'); var headCell = headTab.insertRow(0).insertCell(0);
headTab.width = '100%'; headTab.cellSpacing = 0; headTab.cellPadding = 0; headTab.border = 0;
headCell.height = vars['head'][1]; headCell.style.backgroundImage = 'url('+vars['head'][0]+')';
var baseTab = document.createElement('table'); var baseCell = baseTab.insertRow(0).insertCell(0);
baseTab.width = '100%'; baseTab.cellSpacing = 0; baseTab.cellPadding = 0; baseTab.border = 0;
baseCell.height = vars['base'][1]; baseCell.style.backgroundImage = 'url('+vars['base'][0]+')';
var tehTab = document.createElement('table');
var newTab = document.createElement('tbody');
var spaceDiv = document.createElement('div');
spaceDiv.style.height = vars['prefs'][0];
tehTab.cellSpacing = 1; tehTab.cellPadding = 4; tehTab.width = '100%';
tehTab.className = 'bordercolor'; tehTab.border = '0';
if(vars['prefs'][3] == 2){
headCell.className = 'headbg';
headCell.innerHTML = riTable[a].rows[b].cells[0].innerHTML;
}else{
newTab.appendChild(riTable[a].rows[b].cloneNode(true));
}
if(vars['prefs'][1] == 'yes'){
newTab.appendChild(forumName.cloneNode(true));
}
riTable[a].rows[b].style.display = 'none';
for(c=1; c<riTable[a].rows.length-b; c++){
var d = b + c;
if(riTable[a].rows[d].cells[0].className == 'windowbg'){
newTab.appendChild(riTable[a].rows[d].cloneNode(true));
riTable[a].rows[d].style.display = 'none';
if(riTable[a].rows[d+1]){
if(pb_username != 'Guest' && riTable[a].rows[d+1].cells[0].align == 'right'){
if(vars['prefs'][2] == 'yes'){ newTab.appendChild(riTable[a].rows[d+1].cloneNode(true)); }
riTable[a].rows[d+1].style.display = 'none';
newCell.appendChild(headTab);
tehTab.appendChild(newTab);
newCell.appendChild(tehTab);
newCell.appendChild(baseTab);
riTable[a].style.display = 'none'
break;
}
if(riTable[a].rows[d+1].cells[0].className == 'catbg' && riTable[a].rows[d+1].cells[0].align != 'right'){
newCell.appendChild(headTab);
tehTab.appendChild(newTab);
newCell.appendChild(tehTab);
newCell.appendChild(baseTab);
newCell.appendChild(spaceDiv);
break;
}
}else{
newCell.appendChild(headTab);
tehTab.appendChild(newTab);
newCell.appendChild(tehTab);
newCell.appendChild(baseTab);
newCell.appendChild(spaceDiv);
break;
}
}else{
newCell.appendChild(headTab);
tehTab.appendChild(newTab);
newCell.appendChild(tehTab);
newCell.appendChild(baseTab);
newCell.appendChild(spaceDiv);
break;
}
}
}
}
riTable[a].rows[0].style.display = 'none';
riTable[a].style.display = 'none';
riTable[a].parentNode.parentNode.style.display = 'none';
break;
}
}
}
</script>Main Footers
This took me a good solid 2 hours of coding to perfect it. Shockingly, it worked almost perfectly on my first try. I spent the first hour coding it, and the next hour perfecting it. Right now, I have it set to all of the below features:
- Category Splitter with Head/Base Images
- Two Types of splitters
- Display of Forum Name row is optional
- Display of Mark-As-Read bar is optional
- Head text position is editable by CSS
That doesn't look like a lot, but it really is. The two types of splitters are:
1.) Image above and below categories
2.) Head image becomes category bar
Editing is pretty simple, yet it looks tough. Just follow the instructions within the code. If you have any questions or concerns, just ask.
