Ok, no intro here. Let's just try to finish this.
Last tut, we learned how to loop through the rows and how to find the category cell. Here's our code to this point:
<script type='text/javascript'>
/* My Little Category Splitter */
/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');
var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";
/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){
if(theTable[t].cellSpacing == 1 && theTable[t].cellPadding == 4 && theTable[t].rows[0].cells[0].innerHTML.match(/Forum Name/i)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
if(theTable[t].rows[r].cells[0].className == 'catbg' && theTable[t].rows[r].cells[0].align != 'right'){
}
}
}
}
</script>Ok, no more stalling. Now that we have found the category cell, we need to add the inner HTML of it to our
newHTML variable. However, we must first add the opening HTML of the table. Also, don't forget the forum name row. We'll add the inner HTML of that as well. Here's our order of things to add:
startHTML, inner HTML of the forum name row, inner HTML of the category row. We can nail all three of these in a simple three lines.
<script type='text/javascript'>
/* My Little Category Splitter */
/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');
var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";
/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){
if(theTable[t].cellSpacing == 1 && theTable[t].cellPadding == 4 && theTable[t].rows[0].cells[0].innerHTML.match(/Forum Name/i)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
if(theTable[t].rows[r].cells[0].className == 'catbg' && theTable[t].rows[r].cells[0].align != 'right'){
newHTML += startHTML;
newHTML += '<tr>' + theTable[t].rows[0].innerHTML + '</tr>';
newHTML += '<tr>' + theTable[t].rows[r].innerHTML + '</tr>';
}
}
}
}
</script>Now, was that simple, or what? We simply just added whatever the contents of
startHTML to the
newHTML variable. We then added on the inner HTML of the forum name row (row 0), and the inner HTML of the category cell. Note that I had to add a <tr> tag before and a </tr> tag after. That's because we take the inner HTML of the row, not the tags themselves.
Hooray! We have now stored the contents of the forum name row and the category cell. Net, we need to get the info from the boards and close off the table. Getting the info is the easy part. Closing it off is the tricky part. First, let's use an if loop to find the board cells. Now, since the boards will naturally come after the categories, we can just let it stand free.
<script type='text/javascript'>
/* My Little Category Splitter */
/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');
var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";
/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){
if(theTable[t].cellSpacing == 1 && theTable[t].cellPadding == 4 && theTable[t].rows[0].cells[0].innerHTML.match(/Forum Name/i)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
if(theTable[t].rows[r].cells[0].className == 'catbg' && theTable[t].rows[r].cells[0].align != 'right'){
newHTML += startHTML;
newHTML += '<tr>' + theTable[t].rows[0].innerHTML + '</tr>';
newHTML += '<tr>' + theTable[t].rows[r].innerHTML + '</tr>';
}
if(theTable[t].rows[r].cells[0].className == 'windowbg'){
newHTML += '<tr>' + theTable[t].rows[r].innerHTML + '</tr>';
}
if(theTable[t].rows[r+1] && theTable[t].rows[r+1].cells[0].className == 'catbg' || !theTable[t].rows[r+1]){
newHTML += finHTML;
}
}
}
}
</script>Alright, you'll notice that I added two if loops. The first one finds any cell with the class 'windowbg', and stores it's inner HTML into the
newHTML variable. We can do this since the for loop will only go up by 1 after the categories. Next, I've used a second if loop to close the table. It checks to see if there's a row after this one. If there is, and it's class is 'catbg', it will close off the table. It will also close it off if there is no next row. That will work for guests, since the mark-as-read row doesn't show up for them.
Ok, we're almost done! We have successfully gathered all of the information from all of the rows and stored it into our variable. Now, all we have to do is replace the current table with our new table. That's all we have to do.
<script type='text/javascript'>
/* My Little Category Splitter */
/*=== Declare Variables ===*/
var newHTML = "";
var theTable = document.getElementsByTagName('table');
var startHTML = "<table width='100%' cellspacing='1' cellpadding='4' class='bordercolor' border='0'>";
var finHTML = "</table><div style='height: 25px;'></div>";
/*=== Begin Coding ===*/
for(t=0; t<theTable.length; t++){
if(theTable[t].cellSpacing == 1 && theTable[t].cellPadding == 4 && theTable[t].rows[0].cells[0].innerHTML.match(/Forum Name/i)){
theTable[t-1].style.backgroundColor = 'transparent';
for(r=1; r<theTable[t].rows.length; r++){
if(theTable[t].rows[r].cells[0].className == 'catbg' && theTable[t].rows[r].cells[0].align != 'right'){
newHTML += startHTML;
newHTML += '<tr>' + theTable[t].rows[0].innerHTML + '</tr>';
newHTML += '<tr>' + theTable[t].rows[r].innerHTML + '</tr>';
}
if(theTable[t].rows[r].cells[0].className == 'windowbg'){
newHTML += '<tr>' + theTable[t].rows[r].innerHTML + '</tr>';
}
if(theTable[t].rows[r+1] && theTable[t].rows[r+1].cells[0].className == 'catbg' || !theTable[t].rows[r+1]){
newHTML += finHTML;
}
}
theTable[t].parentNode.innerHTML = newHTML;
break;
}
}
</script>Notice how I simply said that the inner HTML of the parent of the board table needs to equal the contents of
newHTML. That will automatically replace the current HTML with the new HTML. Also notice that I breaked the for loop right after it.
This is very important! NEVER forget to break it. If you don't, the code will search for the next table that has "Forum Name" in the first cell of the first row. All of the new tables we made have this. That will lead to an infinite loop that will lock-up your browser.
Well, still, there you have it! That is a working category splitter. Plug that final code into any main footer of any forum, and it will work in Firefox, Internet Explorer, and Opera. It will divide the categories with a gap between them all. However, I pretty-much gave you the code. It's now up to you. Close out your browser and make your own version of this code. Remember what I did, and how I did it. Create YOUR category splitter, and try it. If you follow these instructions and do what I told you, it should work.
After you've created your version, feel free to post it in this thread. Show us your work. Tell us how you created it. Then, take the challenge! I told you how to do it, now work off of it. Learn how to add the mark as read row to the last table. Try adding head/base images. You know what to do. Now, learn how to do it.
Thanks for reading!
~Scorpian
Last Edit: Nov 19, 2006 22:30:44 GMT by Scorpian
I think you're going overboard writing this as multiple parts.
