Advanced Category Splitter v3.0 [CB]

[Chris]

Updated 11/01/07 for v4.5 compatibility.

<script type="text/Javascript">
// Advanced Category Splitter v3.0 by Chris
// Do not redistribute without permission of the creator
/* DO NOT EDIT THIS LINE */ var him = []; var fim = [];


// EDIT HERE
var type = 1;
// 1 = Original ACS type. Text in head image.
// 2 = Head/Base images with cat name in normal row.
// 3 = Head/Base images with cat name in the Forum Name row spot.

var markAsReadType = 1;
// 0 = Mark as read button is not shown at all.
// 1 = Mark as read button is in own row in final category.
// 2 = Mark as read button is in the footer image underneath final category

him["URL"] = "URL OF HEAD IMAGE"; // URL of your header image. Required only if using type 1.
him["height"] = 19; // Pixel height of your head image. Required if using a head image

fim["URL"] = "URL OF BASE IMAGE"; // URL of your footer image. Required only if markAsReadType is 2
fim["height"] = 19; // Pixel height of your base image. Required if using a footer image.

var forumName = 1;
// 0 = Don't include the forum name row. Note: This can mess up the cell sizes.
// 1 = Include the forum name row.

var defaultCats = [ // These are the category ids for the categoriess that will be hidden on the first time the page is viewed. Last one does not have a comma.
"category1id",
"category2id",
"category3id",
"category4id" // NO COMMA ON LAST LINE
];

var spacing = 15; // Space between the categories.

// DO NOT EDIT
var aTB = document.getElementsByTagName("TABLE");
var isIE = (document.all?true:false);

if(!document.cookie.match(/debo=1/i)){
defaultCats.push("debo");
for(a=0;a<defaultCats.length;a++){
document.cookie = defaultCats[a]+"=1;expires="+(new Date()).toGMTString().replace(/\d{4}/,"2050");
}
}

function hideShow(i){
var i2 = document.getElementById(i);
i2.style.display = (i2.style.display=="none"?"":"none");
document.cookie = i+"="+(i2.style.display == ""?"0":"1")+";expires="+(new Date()).toGMTString().replace(/\d{4}/,"2050");
}

var div = document.createElement("DIV");
var sp = document.createElement("DIV");
sp.style.height = spacing;

if(location.href.match(/action=(change|home)/i) || !location.href.match(/(action|board)=/i))
document.write("<script type='text/Javascript' src='http://www.iycatacombs.com/codes/acsv3/normal"+type+".js'><\/script>");
</script>

Finally. Three splitters in one, and a bit more complex to edit. Completely DOM (or should be).

0 Cokes were drunk during the production of this code. o.o Personal record for any kind of splitter.

New Features
- Hide/Show with remembering and default hidden categories
- Type 2 and type 3 splitter.
- Optional location for Mark as Read in Footer
- A few others I probably forgot

Main Footers.

Now to explain how to edit.


var type = 1;
That line designates which type of splitter you want. To figure out what the types are, there's a brief description in the code, but you can also scroll down to "Previews" to see an example in action.

var markAsReadType = 1;
That line is the mark as read display type. Three types: 0, 1, and 2. 0 doesn't display the bar, 1 has it in its own row in the last cat, and 2 puts it in the footer image.

him["URL"] = "URL OF HEAD IMAGE";
That's the URL of your head image. Don't change it or leave it blank if you don't want an image.

him["height"] = 19;
Height of the head image.

fim["URL"] = "URL OF BASE IMAGE";
That's the URL of your base image. Same thing as head image.

fim["height"] = 19;
Height of the base image.


var forumName = 1;
Display type for forum name. 0 hides it, 1 shows it.

var defaultCats = [
"category1id",
"category2id",
"category3id",
"category4id"
];
Those are the IDs for the categories to be hidden on default. If the user has already visited the page, these will not update. Only if they're new. This also applies to guests. To find a category ID, go to the Admin Area > Reorder Categories and the category IDs are in the order they appear. Find the one that matches, and you're set. You can also go into a board in the category, and click the link in the nav tree, and then copy everything after the number sign in the URL.

var spacing = 15;
The space between categories in pixels.


Now, onto how to position the text in the header. Its all done using CSS. God, CSS is amazing. First off, all the CSS will go between the following tags.
<style type="text/CSS">
/* CODE HERE */
</style>

Now, first off, we can position the text either center, left, or right. So we'd put the following lines between the tags above, after replacing "DIRECTION" with any of the previously mentioned texts.
div.head {
text-align: DIRECTION;
}

Next, we can adjust the positioning of the link in the header dynamically, pixel by pixel. Replace the number signs (#) with the ammount of pixels to adjust it. You can use negative ammounts if needed.
div.head a {
position: relative;
top: ##px;
left: ##px;
}



Previews
Type 1
Type 2
Type 3


Enjoy!