[CB] Expand/Collapse Categories /w Image Highlight

[Jay]

Live Preview: click here
Placement: main footer
Compatability: PBv4 / Crossbrowser
Notes: My newest code. Read below for information on how to edit.


<script type="text/javascript">
<!--
/* Created by Jay.
Expand/Collapse Categories /w Image Highlight

ngmaster.proboards21.com
This code may not be redistributed without permission.
Please leave this header intact at all times. */


// text you want displayed when a category is hidden (i.e: 'Collapsed')
var displayText = 'Collapsed';

// catbg mouseover color (enter hex color or leave blank)
var mouseOverColor = 'HIGHLIGHT COLOR';

// catbg mouseover image (enter url or leave blank)
var mouseOverImage = 'HIGHLIGHT IMAGE';


hideCat.prototype.appendFunction = function() {
hideCat(this, false);
}
function hideCat(catname, boldchild) {
var boldchild = catname.getElementsByTagName('B').item(0);
for (var t = catname.parentNode.parentNode.rows.length - 1; t >= 0; t--) {
if (catname.className == 'catbg' && catname.parentNode.parentNode.rows.item(t).innerHTML == catname.parentNode.innerHTML) {
for (t2 = t + 1; t2 < catname.parentNode.parentNode.rows.length; t2 ++) {
if (t != (catname.parentNode.parentNode.rows.length - 1) && catname.parentNode.parentNode.rows.item(t2).firstChild.colSpan > 4) {
break;
}
else if (t <= t2 && catname.parentNode.parentNode.rows.item(t2).style.display != 'none') {
catname.parentNode.parentNode.rows.item(t2).style.display = 'none';
boldchild.innerHTML += ' <span style="font-size: 8px;"><i>(' + displayText + ')</i></span>';
boldchild.innerHTML = boldchild.innerHTML.replace(/\s<s.*s.*>\s/i, ' ');
}
else {
catname.parentNode.parentNode.rows.item(t2).style.display = '';
boldchild.innerHTML = boldchild.innerHTML.replace(/<s.*\/s.*>/i, '');
}
}
break;
}
}
}
if (window.location.href.match(/\.com(\/|.+cgi(\?|#.+|\?\w+=(home|\w{15}y.+))?)?$/i)) {
(mouseOverImage != '')? document.write('<img src="' + mouseOverImage + '" style="display: none;" />') : '';
var getTab = document.getElementsByTagName('TABLE');
for (var t = 0; t < getTab.length; t ++) {
for (var tr = 0; tr < getTab.item(t).rows.length; tr ++) {
if (getTab.item(t).rows.item(tr).firstChild.colSpan > 4 && getTab.item(t).rows.item(tr).firstChild.align != 'right') {
getTab.item(t).rows.item(tr).firstChild.onclick = function() {
return hideCat(this, false);
}
getTab.item(t).rows.item(tr).firstChild.onmouseover = function() {
var bgval = ((mouseOverImage != '')? 'url(' + mouseOverImage + ');' : '');
var colval = ((mouseOverColor != parseInt(mouseOverColor) || mouseOverColor != '')? mouseOverColor : '');
this.style.cssText = 'background: ' + bgval + ' #' + colval + ';';
this.style.cursor = 'pointer';
}
getTab.item(t).rows.item(tr).firstChild.onmouseout = function() {
this.style.cssText = '';
this.style.cursor = '';
}
}
}
}
}

//-->
</script>


This gives you the option to have an image or colour highlight when you hide the categories. The idea is to have a mouseover gradient that's a tad bit lighter than your catbg gradient. It will give the effect shown in the preview. Follow the comment lines and alter the red bits only.

March 27, 2009: Updated location check ~ Triad