Staff Online for phpbb3

Hello,

I am currently testing a code for phpbb3. I am using this code in the widget for the Staff Online widget but it seems that the avatars are not displaying. Could i get some help on that?

Code:

    <script type="text/javascript">
    myStaff = ['/u1', '/u2'];
    staff_cache_time = 4*60*1000; // mm*ss*ms;
    </script>   
<div id="theStaff">
</div>
   
<div style="display:none" id="theContent">
</div>
    <noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript>    <script type="text/javascript">
    if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#theStaff').html(localStorage.staffOn);
    else loadStaff();
    function loadStaff() {
      jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
        for (i=0; i<myStaff.length; i++) jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
        if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('No staff online');
        if (window.localStorage) {
          localStorage.staffOn = jQuery('#theStaff').html();
          localStorage.staffEx = +new Date;
        }
      })
    }
    </script>

Version: Phpbb3


Thanks

Hello MrMind,

From what I'm looking at there's nothing in there that displays the avatar, it only returns a name.

How can i make it return the avatar of the name also?

See if this works :

Code:

    <script type="text/javascript">
    myStaff = ['/u1', '/u2'];
    staff_cache_time = 4*60*1000; // mm*ss*ms;
    </script> 
<div id="theStaff">
</div>
 
<div style="display:none" id="theContent">
</div>
    <noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript>    <script type="text/javascript">
    if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#theStaff').html(localStorage.staffOn);
    else loadStaff();
    function loadStaff() {
      jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
        for (i=0; i<myStaff.length; i++) jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
        if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('No staff online');
        $('.myStaff a').each(function() {
          var href = $(this).attr('href');
          $(this).before('<span class="monAva"></span>').prev().load(href + ' #profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', function() {
            if (window.localStorage) {
              localStorage.staffOn = jQuery('#theStaff').html();
              localStorage.staffEx = +new Date;
            }
          });
        });
      });
    }
    </script>

You can style the images with this CSS :

Code:

.monAva img {  }

Sorry this doesn't work..

Change those dollars $ singes with the word jQuery in code code given by Ange Tuteur, and it should work.

Oh yes, I forgot. I don't manage script in widgets much

Try now

Code:

   <script type="text/javascript">
    myStaff = ['/u1', '/u2'];
    staff_cache_time = 4*60*1000; // mm*ss*ms;
    </script>
<div id="theStaff">
</div>
 
<div style="display:none" id="theContent">
</div>
    <noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript>    <script type="text/javascript">
    if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#theStaff').html(localStorage.staffOn);
    else loadStaff();
    function loadStaff() {
      jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
        for (i=0; i<myStaff.length; i++) jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
        if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('No staff online');
        jQuery('.myStaff a').each(function() {
          var href = jQuery(this).attr('href');
          jQuery(this).before('<span class="monAva"></span>').prev().load(href + ' #profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', function() {
            if (window.localStorage) {
              localStorage.staffOn = jQuery('#theStaff').html();
              localStorage.staffEx = +new Date;
            }
          });
        });
      });
    }
    </script>

That works like a charm! One little problem! How can i move the names of the staff and align them in the middle?

Try aligning them with this :

Code:

.myStaff { vertical-align:middle }

uhm i don't know if that made something because the avatars disappear all of a sudden..

My bad! The avatars appeared! But the code didn't do anything..

Try this :

Code:

.myStaff a {
  display:inline-block;
  vertical-align:top;
  margin-top:.75em;
}

Yes that fixed it! Thank you both! Topic Solved!