[CB]SlipStream Category Splitter

[ME!]

Did this a couple of weeks ago, when i was practicing my DOM. So this should be written in pure DOM. it does exaclty as what is here so yeah, it wasnt intended to be released , but i got bored



GLOBAL HEADDER


<style type="text/css">
<!--

.head {
            background-image: url(URL OF IMAGE);
            height: 34px;
            width: 725px;
}

.base {
            background-image: url(URL OF IMAGE);
            height: 34px;
            width: 725px;
}

.tablebg {
            background-image: url(URL OF IMAGE);
            width: 725px;
}

-->
</style>





MAIN FOOTER

<script type='text/Javascript'>
<!--

/* SlipStream Category Splitter- DregondRahl
Donot Repost this code or edit this copyright
http://101support.proboards43.com
http://support.proboards.com */

var iTableWidth = "97%";
var catSpacing = "30px";


//Do not Edit Below

var table = document.getElementsByTagName('table');
var div = document.createElement('div');
var divA = document.createElement('div');
divA.style.height = catSpacing ;

if(location.href.match(/action=home/i) || !location.href.match(/action=/i)){
for(i=0; i<table.length; i++){
if(table[i].cellPadding =='4' && table[i-1].className =='bordercolor' && table[i].rows[0].cells[0].firstChild.innerHTML.match(/Forum\sName/i)){
for(r=1; r<table[i].rows.length; r++){

if(table[i].rows[r].getElementsByTagName('a')[0].name){

var divH = document.createElement('div');
var divB = document.createElement('div');
divH.className = 'head';
divB.className = 'base';

var tabA = document.createElement('table');
tabA.appendChild(document.createElement('tbody'));
tabA.cellPadding = '0';
tabA.cellSpacing = '0';
tabA.width = '100%';
tabA.id ='daSplit';

var tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.firstChild.className = 'tablebg';

var tab = document.createElement('table');
tab.className = 'bordercolor';
tab.width = iTableWidth;
tab.cellPadding = '4';
tab.cellSpacing = '1';
tab.align ='center';


var cat = table[i].rows[r].cells[0].lastChild;
tab.appendChild(document.createElement('tbody'));
tab.firstChild.appendChild(table[i].rows[0].cloneNode(true));

var title = tab.rows[0].cells[0].firstChild.firstChild;
title.parentNode.replaceChild(cat,title);

tr.firstChild.appendChild(tab);
tabA.firstChild.appendChild(tr);
div.appendChild(divA.cloneNode(true));
div.appendChild(divH);
div.appendChild(tabA);
div.appendChild(divB);


} else if(table[i].rows[r].cells[4]){
tab.lastChild.appendChild(table[i].rows[r].cloneNode(true));
}
}

table[i-1].parentNode.replaceChild(div,table[i-1]);
break;
}
}
}

//-->
</script>



Since i wrote this for practice prupose, iv spaced it and written it in the easiest way to read DOM, so anyone else can use it to learn abit abt DOM too. but it needs a little knowledge of codeing.

basic CSS part, just edit the width and high of the head/base images and the width of the background image. Anyone can help you if you ask.You can change any of the classes, or ask someone here to do so,




var iTableWidth = "97%"; // Width of Inner table. it shoudlbe smaller than the background image

var catSpacing = "30px"; // kinda a Duh..but its the space between cats.



there we go..enjoy
oh and it should be fast coz i used CSS..


Note, you'll need a forum resize code liek this


<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(t=0; t<table.length; t++) {
              if(table[t].width=="92%")
              table[t].width='725px';
}
// -->
</script>


Directly under the catsplitter

[Richie]

what if someone used Chris's CSS Forum Resize Code? would this work with it?

[ME!]

should work fine, but it depends on the forum width and the image sizes