Boards in Columns

bump

The link along with a description of exactly what you wanted would have simplified things.

observations:

---

• That link appears to have triple column board listings
• some categories however have boards that get a full row by themselves along with additional data (topics, descriptions).
• The full row examples look to be only in categories that do not have enough boards to fill a three-column row.
• There are no examples of what would happen if a category had 5 boards. Would first 3 be in a triple row and last 2 be in a double row or last two (or perhaps all) be in a full row by themselves

These mundane questions are essential to working out the logic of a code but no answers are provided either through additional examples or by a detailed description. A code such as the one I'm posting below then has to try to be as flexible as possible to accommodate your preferences which makes it much more complex and large.

Also a link to where the code is intended to be installed would reveal what codes are already there and any potential conflicts.

Code:

---

<script type="text/javascript">
<!--
(function(){
    /*Stacked Boards Listings (Global Footer) */
    var maxCols=3; //maximum number of boards per row
    var wideBoards=[]; //List of boards that should get a full row with full data display (topics, description, etc.)
    var hideBoards=[]; //List of boards to skip
    var tabCompatMode=false; //make compatible with tabulate main page code (install in main footer above tabulate code)
    var autoWiden=true;

    var tbl=document.createElement('table').insertRow(-1).parentNode;
    var tBod=document.getElementsByTagName('tbody'),a,aa,b,bb,bbb,c,d,e;
    var mainTitle=["Forum Name","Sub-Boards"];
    function sizeCols(){
        var d,z;
        if(b && b.cells && b.cells[0]){
            d=parseInt(100/maxCols);
            for(e=0;e<b.cells.length;e++){
                if(!b.cells[e].nextSibling){
                    if(e==0 && (autoWiden ||(z=b.cells[e].getElementsByTagName('a')) && z[0] && z[0].href.match(wideBoard))){
                        bbb.style.display='';
                        bb.firstChild.innerHTML=bb.firstChild.innerHTML.replace(/<br\s*\/?>/ig,' ');
                        z=bb.firstChild.firstChild.style;
                        z.display='';z.cssFloat=z.styleFloat='right';
                        bb.firstChild.firstChild.innerHTML=bb.firstChild.firstChild.innerHTML.replace(/,/ig,'');
                    }
                    b.cells[e].width=bb.cells[e].width=bbb.cells[e].width=(100-((b.cells.length-1)*d))+'%';
                }else{
                    b.cells[e].width=bb.cells[e].width=bbb.cells[e].width= ''+d+'%';
                }
            }
        }
    }
    function addCols(){
        sizeCols();
        b=tBod.insertRow(c.rowIndex).insertCell(-1).appendChild(document.createElement('table')).insertRow(-1);
        b.offsetParent.style.cssText="width:100%;padding:0px;"; b.className="mediumtitlewrapper";
        bb=b.parentNode.insertRow(-1); bb.className="row4wrapper";
        bbb=b.parentNode.insertRow(-1); bbb.style.display="none"; bbb.className="row6wrapper";
        var z=tBod.rows[c.rowIndex-1];
        z.firstChild.colSpan=c.cells.length;
        z.firstChild.className='cattext windowbg2';
    }
    function ohtml(o){return o.outerHTML?o.outerHTML:(document.createElement('div')).appendChild(o.cloneNode(-1)).parentNode.innerHTML;}
    function itext(o){return (("innerText" in o)?o.innerText:o.textContent)}
    function a2re(a){var r=/\.\./;if(a.length)r=new RegExp('\\bboard=('+a.join('|')+')\\b','i'); return r}
    if(pb_action.match(/^(home|boardindex)$/)){
        var wideBoard=a2re(wideBoards), hideBoard=a2re(hideBoards),x,y,z;
        for(var a=tBod.length-1,wide=false,w;a>0;a--){
            if((aa=tBod.rows[0].cells[0]) && aa.className=='titlebg' && aa.lastChild && aa.lastChild.innerHTML && aa.lastChild.innerHTML.match(new RegExp(">("+mainTitle.join('|')+")<","i"))){
                while(aa.nextSibling){aa.nextSibling.style.display="none";aa.parentNode.firstChild.colSpan++;aa=aa.nextSibling;}
                c=tBod.rows[1];
                if(c.cells[0]&&c.cells[0].className!='catbg') addCols();
                while(c){
                    if(c.cells[0]){
                        if( !c.innerHTML.match(/mouseOverHighlightCellB?\(/)){
                                    if(/action=markallboardsread/.test(c.innerHTML)){sizeCols();break;}
                            c=c.nextSibling; continue;
                        }else{
                            if(c.previousSibling.cells[0].className=='catbg' && c.previousSibling.cells[0].offsetWidth)addCols();
                        }
                    }else{c.style.display="none";c=c.nextSibling; continue;}
                    z=(c.cells[1] && (x=c.cells[1].getElementsByTagName('a')) && x[0])? x[0]:{href:''};
                    if(z.href.match(hideBoard)){c=c.nextSibling;if(tabCompatMode){tbl.appendChild(c.previousSibling); }else{ c.previousSibling.style.display='none';} continue;}
                    if(z.href.match(wideBoard)){wide=true; if(b.cells.length>0)addCols();}else{wide=false;}
                    d=b.insertCell(-1); d.className='windowbg2 mediumtitle';
                    d.innerHTML=ohtml(c.cells[1].getElementsByTagName('b')[0].parentNode);
                    d=bb.insertCell(-1); d.className='windowbg row4';
                    x=itext(c.cells[2]).match(/(\d[\d,]*)/)[1].replace(/,/g,'');
                    y=itext(c.cells[3]).match(/(\d[\d,]*)/)[1].replace(/,/g,'');
                    z=itext(c.lastChild).replace(/[\s\n\r]/g,'');
                    d.innerHTML= '<div style="display:none;" >'+x+' topics & '+y+' posts</div>last post:<br>'+ (z.length?c.lastChild.innerHTML:'--');
                    d.innerHTML=d.innerHTML.replace(/\b1\s(Topics|Posts)/g,function(m,p){return '1 '+p.replace(/s$/,'')})
                    d=bbb.insertCell(-1); d.className='windowbg2 row6';
                    d.innerHTML='<font size="1">'+c.cells[1].innerHTML.split(/<font size=['"]?1['"]?>/i).pop();
                z=c;y=z.rowIndex; c=c.nextSibling;
                if(tabCompatMode){
                    tbl.appendChild(z);
                    if(tBod.rows[y-1].cells[0].className!='windowbg'){
                        x=tBod.rows[y-1].insertCell(0);
                        x.className='windowbg'; x.style.display='none';
                    }
                }else z.style.display="none";
                if(!c){
                sizeCols();break;
                }else if(c.innerHTML.match(/pb_bubble/)){
                    if(wide){wide=false;addCols();
                    }else if(b.cells.length>=maxCols){addCols();}
                }
       
            }
        }
    }
}
})()
// -->
</script>

Usage:

---

Place in Main Footer or Global Footer (to affect sub-boards as well).
If wishing to use with the Tabulate Main Page code then install in main footer (above tabulate code) and set var tabCompatMode=false; to true

Add the IDs of boards you want to be fully data loaded to the var wideBoards=[]; like so var wideBoards=['board1','board2','board3'];. Note that rather than in addition to automatically determining which boards are fully loaded the code gives you the option to disable autoWiden and selectively choose, however setting a board to full can affect the stacking of boards surrounding it. To set all boards to full use an empty ID like so: var wideBoards=[''];

var maxCols=3 sets the columns to three, play with it if your categories have board counts more evenly divisible by another number such as 5 or 4.

^{edit (added autoWiden option)}

---

var autoWiden=true; automatically widen boards that happen to end up in a row by themselves (by adding description, topic count, etc.). Set to false to not have this occur. To widen all boards but omit descriptions set var maxCols=1

To condense to two lines, change the following line

d.innerHTML= '<div style="display:none;" >'+x+' Topics . '+y+' Posts</div>Last Post:<br>'+ (z.length?c.lastChild.innerHTML:'--');

to

d.innerHTML= '<div style="display:none;" >'+x+' Topics . '+y+' Posts</div>Last Post: '+ (z.length?c.lastChild.innerHTML.replace(/<\/a><br/i, ' <\/a'):'--');
(it's one long line so if you're seeing it as two that's just wrapping to avoid page stretch)

The code gives each of those sections a secondary class corresponding to the classes of the example page that spawned it. The last post would have a secondary class of row4 in addition to being windowbg so to target just that use: .row4 {background-color: #123456;}.

For board title it is mediumtitle and for description it is row6

To change the background color of the "Last Post" area, he is saying to just put this CSS into your Global Header.
Change the Blue hex value to a color of your choosing.

<style type="text/css">
<!--
.row4 {background-color: #FF0000;}
-->
</style>

Regards,
SubDevo

thank you