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.


Last Edit: Nov 19, 2006 22:30:04 GMT by Scorpian