18. A New PHPBB3 Memberlist

18. A New PHPBB3 Memberlist
(phpbb3 only)

For a demo, visit the memberlist on this board. This will give you one similar.

First of all visit your CSS for the styling and add this:

Code:


.membox {
  float: left;
  padding: 5px;
  border: 1px solid #105289;
  background: #e1ebf2;
  margin: 10px;
  height: 115px;
  width: 165px;
  border-radius: 3px;
  box-shadow: 2px 2px 2px #105289;
}
.membox:hover {  border: 1px solid #c05; }
.membox .showinfo>a img {
  display: block;
  height: 90px;
  width: 90px;
}
.membox .showinfo td {  float: right; }
.membox .showinfo a {  font-weight: bold;  font-size: 11px;}
#memberlist { padding: 15px 5px; margin-bottom: 30px; }
#memberlist .row1, #memberlist .row2, #memberlist tbody, #memberlist thead {display:none}
.memopt {  display: block; }
.memopthead {  text-decoration: underline;  display: block; }
.meminner {
  position: absolute;
  z-index: 999;
  border: 1px solid #c05;
  background: #e1ebf2;
  box-shadow: 2px 2px 2px #666;
  border-radius: 3px;
  padding: 5px;
  width: 120px;
  margin-left: 15px;
}


This is the exact same styling used on the memberlist on this board. Edit it how you please, however a few things in there could completely mess up your display, so your better just to mess with the colors really.

Next go to any Javascript which you have in All Pages. (if you don't have any, create a new one)
And then add this to it:

Code:


function sortMemlist() {
  var x=document.getElementById('memberlist'),
      y=x.getElementsByTagName('tr'),
      headers=y[0].getElementsByTagName('th'); 
  for(i=1;i<y.length;i++) {
    var outer=document.createElement('div'); outer.className="membox";
    var td=y[i].getElementsByTagName('td');
    outer.innerHTML+="<div onmouseover=\"$('#meminfo"+i+"').show();\" onmouseout=\"$('#meminfo"+i+"').hide();\" class=\"showinfo\">"+ td[1].innerHTML+ "</div>";
    var inner=document.createElement('div'); inner.className="meminner";
    inner.id="meminfo"+i; inner.style.display="none";
    for(j=3;j<td.length-2;j++) {
          if(td[j].innerHTML!='' && td[j].innerHTML!='  ') {
              inner.innerHTML+="<span class='memopthead'>"+headers[j].innerHTML+":</span>";
          }
        inner.innerHTML+="<span class='memopt'>"+td[j].innerHTML+"</span><br>";
    }
    outer.appendChild(inner);
    x.appendChild(outer);
    $($('.showinfo')[i-1]).append(td[td.length-2]).append(td[td.length-1]);
  }
}

That is the function which will loop through all the rows in the memberlist, each time creating the nice little box.

Now to call that function at the right time. Visit your Javascript and take a look at them.
If you have a Javascript that it set for 'All Pages' and you can see this line in there: $(function(){

Then what you need to do is add this underneath it:

Code:

if(document.getElementById('memberlist')){sortMemlist();}

If you can't find that line, then add to your Javascript file this:

Code:

$(function(){if(document.getElementById('memberlist')){sortMemlist();}});

And you should be done
As i say visit the memberlist on this forum for a demo of what it looks like.

is there one for punbb

Hey!
Thank you very very much for this useful tutorial!

I just wanted to make a questions about the location of the last alternative link you provided in case there were no other scripts in all pages with the $(function(){: If I were to add it to the same script you provided in the second step, would I add it before the closing } ?

I'm afraid I only get an empty table header, no more. So I guess I'm screwing it up somewhere... as usual!

Thanks for this useful tutorial!

No it would go after that last closing bracket. It would need to be below it as a separate chunk of script.

This:

Code:


$(function(){if(document.getElementById('memberlist')){sortMemlist();}});


Well done for trying though

I see!! Thank you!!