$©Ø®Þ!@Ω™
Coding Moderator
<<)(^_^)(>>
lml_<(O.o)>_lml
Posts: 194
|
Post by $©Ø®Þ!@Ω™ on Dec 10, 2006 17:44:28 GMT -5
Alright, so you think that your level of coding is good enough to make the elusive category splitter? Well, that's great! I am here to help you. In reality, it's extremely over-rated. Creating a category splitter is actually pretty easy, once you understand how to do it.
Before we actually start writing the code, let's make sure you're ready for it. Yes, it's easier then it sounds. However, that doesn't mean that it's "easy", so to say. This tutorial will basically layout what we're going to do, and how we're going to do it. You'll know if you're ready for it after reading this.
Now, let's state what you should know in order to make a category splitter. First off, you should know pretty darn good HTML. At least be familiar with the layout of tables before starting. You also need to have all the basics of JavaScript nailed. This includes, but is not limited to, if/else loops, for loops, arrays, and basic DOM. If you know and are feeling pretty good about all of the above, you're probably ready for this.
So, what are we going to do?
Alright, let's begin! First off, what is a category splitter? A category splitter is a code that will divide the boards and category names into groups. How can this be done? There are several different ways. However, the easiest way is to loop through the rows of the table, and take the inner HTML of them. That's the method we're going to be using.
Note: This method is ONLY recommended when learning how to make complex codes like this. It is a very in-efficient and buggy method compared to much faster and more reliable DOM. However, that's beyond our level now. This method will still work, and will work well.
Ok, the category splitter that we'll make together will just be a simple "divide the frickin' categories" code. No head image, no base image, nothing fancy. Just a box with the cells and a gap. To do this, we're going to start off the HTML of a table, and add in the finish of it. We'll be updating one big code instead of several little codes. Keep up with this and understand what I do as I do it to avoid confusion.
<script type='text/javascript'> /* My Little Category Splitter */
var newHTML = ""; var theTable = document.getElementsByTagName('table'); </script> That might not look like much, but we've defined our two most vital variables. the variable newHTML will store the HTML that we've collected from the cells thus-far. The variable theTable will store an array of all the elements with the tag name 'table'. (You should already know that)
Now that we have defined our two most important variables, we need to define two more.
<script type='text/javascript'> /* My Little Category Splitter */
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>"; </script>
Alright, we've just set up our code. The variable startHTML defines what HTML needs to be added to begin a new table for a new category. The variable finHTML defines the HTML needed to complete a table for a category. Naturally, we're going to be using both each time we find a new category.
startHTML is simply the opening tag for a table. It sets the width to be 100%, the space between the cells to be 1px, the padding of the cells to be 4px, the background color to be your forum's border color, and for the overall default border to be hidden. That is the way that the forum is set-up by default. However, we've left the row tag out. Why? You'll find out soon...
finHTML just closes the table tag that the startHTML variable opened up in the first place. It then adds a div with a height of 25px after it. That is the space between that category and the next.
Now, you should have a pretty good idea of we've just set up. We've defined 4 variables, each critical to the code. You should understand what each variable does, and what is in it. If you don't, go back and re-read the parts you don't get. If you can't understand most or any of things I'm talking about, you're probably not ready to tackle a category splitter. If that's the case, just go back and read some more tutorials about the stuff you don't understand, come back, and try again.
In part 2, we'll learn how to find and loop through the rows of the table with the boards. You'll then learn how to take the inner HTML from them, and add it to our newHTML variable.
|
|
$©Ø®Þ!@Ω™
Coding Moderator
<<)(^_^)(>>
lml_<(O.o)>_lml
Posts: 194
|
Post by $©Ø®Þ!@Ω™ on Dec 10, 2006 17:44:53 GMT -5
Alright, welcome to part 2 of my Creating a Category Splitter tutorial. Before we begin, let's re-cap what we learned in the previous tutorial. Here's the code we have so far: <script type='text/javascript'> /* My Little Category Splitter */
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>"; </script> If you forgot what some of the variables or for or what they are saying, re-read the first tutorial before continuing. That code will do this much to split the categories: doodley-squat. All it will do is define some variables. Woo-hoo! Isn't that cool? [/sarcasm] Alright, it's time to make our code... DO something. So, how are we going to split the categories? So far, we have everything needed to store info gathered, as well as the info to begin and end each category. However, like I said before, that's not enough. A code is no good without stuff to put in it. We need to get the information from the table that has the categories and cells. To do this, we're going to have to find it, to begin with. Now, let's find the table. It's the 6th table in a default ProBoards layout. However, some people have tables in their headers. That's too big of a margin for error. Thus, we can't declare which table we'll use with a specified number from the top. Well, that sucks. What about from the bottom? Well, we could. However, there's the problem of the info center. It has tables within it. It can be up to 4 extra tables. That's an even bigger margin for error. Ok, that officially eliminates the possibility of knowing which table has the info by default. It looks like we'll have to loop through all the tables to find which one it is. To do this, we're just going to use a for loop. How? Simple, just loop through the tables. We'll start from the top. That gives us a better chance of finding it sooner. <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++){
} </script> Alright, if you remember how for loops work, you should understand what that means. However, for those few who are confused, this is what we said: We have defined t as a variable that has the value of 0. Next, we said that t will always be less then the length of the array of tables we defined earlier. Remember that JavaScript counts from zero. However, array lengths are defined starting from one. This means that if there were 7 total tables, the array would stop once it hit 7 since it always has to be less then 7. Anywho, we lastly declare that t will increase by 1 after it loops through the defined code. Excellent, we have a loop that will successfully loop through all tables loaded. Is that enough? No! We need to find our specific table. However, the margin for error is wide. We need to narrow it down enough to the point where we cannot find ANY table except for the one we want. To do this, we'll use an if statement. Making the if statement is the hard part. We're going to search for a table where the first cell has "Forum Name" written in it. Simple enough, right? However, that text could be in the welcome table. To make sure we don't grab the welcome table, we'll look for specific table properties. The welcome table only has a padding of 3px. The table we want has a padding of 4px. That's not enough though. We want to make sure we grab the table itself, not the table it's nested withing. This is how we'll do it: <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)){
}
} </script> First off, the code will only return a table who's cell spacing is set to 1px. That eliminates the possibility of grabbing the table that the one we want is nested within. Next, we make sure that the table returned will have a cell padding of 4px. That eliminates the possibility of grabbing the welcome table. Lastly, we make sure that the first cell of the first row has "Forum Name" written in it. That eliminates the possibility of grabbing any table except for the one that we want. Alright, let's re-cap what we learned today. We have successfully looped through all of the tables that have been loaded so far. We have then found the table that we are looking for, and are ready to start grabbing the information. That is what we will tackle in the next tutorial. Happy coding!
|
|
$©Ø®Þ!@Ω™
Coding Moderator
<<)(^_^)(>>
lml_<(O.o)>_lml
Posts: 194
|
Post by $©Ø®Þ!@Ω™ on Dec 10, 2006 17:45:08 GMT -5
Yo! This is part 3 of the Creating a Category Splitter tutorial series. If you have not already, be sure to read parts 1 & 2 before continuing. If you don't, you'll probably be lost throughout this one. So, recap time! In part 1, we learned how to setup the variables. In part 2, we learned how to find the table with the boards. Now, we're going to learn how to grab the info. First off, here's our code that we have so far: <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)){
}
} </script> To this point, our code should be able to flawlessly locate the table. We also have most of the variables setup that we'll need. Thus, we're on easy street for this lesson. We already know exactly where the table is. Now, let's grab the information from it. Remember, ALWAYS follow the K.I.S.S. rule. If you don't know what that means, it stands for Keep It Simple, Stupid. Don't go out of your way to do this. Find the easiest method, and use it. We don't need to use RegExp or something to grab the info. Let's just grab ALL the inner HTML from the rows. Easy? Yes. It's very easy, in fact. Ok, to the code. Before we divide the categories, there's one small bug. Let's fix it now to save us the trouble later. The table behind the one with the boards is what has the border color. We need to remove it. That's pretty simple to do, though. We just need to say that the table before it needs to have a transparent background color. <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';
}
} </script> Yes, it really is that simple. Congrats! Our code actually does something now! However, we both know that's not going to be enough. We need the actual information inside each of the cells. To do this, we're going to have to loop through the cells. This is actually the easy part. We'll just use the same method we used to loop through the tables. <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++){
}
}
} </script> Now, you might notice something awkward about that for loop. I set the variable r to be equal to 1. Why? We already know what's in the first row (0). There's no point in looping through it. The real info that we need is in all the rows after the first one. Thus, that's where we'll start. Ok, so we have our second for loop set up. Now, here's what we need to do. We need to set the code so that it will add the start HTML to the stored HTML every time we encounter a category cell. We'll then need to store more information when we encounter a board cell. Lastly, we'll need to close the category after we have all the boards for it. That's the tough part. We'll use some if loops to do it. First, let's find the category cell. This isn't as simple as you'd think, though... <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> Notice how I had to use two aspects to find the category cells. I checked to make sure that the class of the cell was catbg. Then, I made sure that it wasn't aligned to the right. Why? Don't forget about the mark-as-read bar. It has the catbg class. However, it's aligned to the right. That's why I checked to make sure the cell wasn't aligned to the right. Alright, I think I've filled your brain with enough info for now. We should know how to loop through the rows of a table. We should also know how to find the cell we want. It'll get much easier once we get to the board cells. We've taken care of the hard parts, for the most part. It should be smooth sailing from here-on-out.
|
|
$©Ø®Þ!@Ω™
Coding Moderator
<<)(^_^)(>>
lml_<(O.o)>_lml
Posts: 194
|
Post by $©Ø®Þ!@Ω™ on Dec 10, 2006 17:45:27 GMT -5
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
|
|
Matt
Graphics Admin
Great admin or greatest admin?
Posts: 4,891
|
Post by Matt on Dec 10, 2006 20:24:48 GMT -5
Thanks for submitting Scorpian
|
|