Widget : Staff Online

First topic message reminder :

This tutorial will allow you to add a widget which displays the currently active staff members on your Forumotion forum. The widget should function for all forum versions, so long as the steps below are followed.

Click to view demo

Permissions

To ensure the widget functions properly some permissions should be modified. Go to Administration Panel > Users and Groups > Special rights and locate the Users status display. If you are planning to display this widget for guests, ensure that the viewing permission is set to Guests. Otherwise, choose an option you prefer.



Installing

To install this widget go to Administration Panel > Modules > Forum widgets management and create a new widget.

Widget name(both) : Your choice
Use a table type : Yes
Paste the code below and save :

Code:

<script type="text/javascript">
myStaff = ['Ange Tuteur', 'Ange'];
staff_cache_time = 4*60*1000; // mm*ss*ms;
</script>

<div id="theStaff"></div>
<div id="theContent" style="display:none"></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).text() === 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>

Modifications

At the top of the widget are some variables that you should modify.

myStaff = ['Ange Tuteur', 'Ange']; : This is the list of members that you want the widget to display when they're online. Each member must be written exactly as their username, and should be between single or double quotes. Multiple members should be separated by commas, for example : ['Member 1', 'Member 2', 'Member 3', 'Member 4'] and so on...

staff_cache_time = 4*60*1000; : This is used to cache the results to prevent continuous requests when changing pages. The default cache time is 5 minutes, this can be changed if you wish.

.myStaff : This is a class name added to each staff member in the widget. You can use this to modify the names to your liking.


Save your modifications,  drag the widget onto your forum, and you're done !


Questions

I wrote this up in a bit of a hurry, so questions can be left below if you're having trouble.

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

When you have time do you think you can help me by giving some steps on how to do that?

Yeah, I'll try to get to it when I'm free.

Ange Tuteur wrote:Yeah, I'll try to get to it when I'm free.

Awesome, thank you. No rush!

Works on Edge and looks great, with a small adjustment. Here's the Dutch translation:

CSS:

Code:

/*STAFF_ONLINE_WIDGET*/.monAva img {height:25px!important;width:25px!important;}
.myStaff a {display:inline-block;vertical-align:top;margin-top:.75em;margin-left:20px;}

Widget Code:

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">Functionaliteit van deze widget is momenteel niet beschikbaar, aangezien JavaScript uit staat of niet wordt ondersteund.</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('Momenteel is er geen personeel aanwezig op de site.');
      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>

Hey, i tried using the code but this is how it displayed, please help me out

Hello,

You most likely made a mistake while pasting the code into the editor. Since you removed the code from your forum, we cannot help you with it.

Wolfuryo wrote:Hello,

You most likely made a mistake while pasting the code into the editor. Since you removed the code from your forum, we cannot help you with it.

Have past the code, still errors  
this is my URL www.9jatech.ml

Hello, I am using phpBB version 3.2.0 and I have integrated the code into the theme although I do not see active managers if I integrate only "No staff online". Please help me, my english is a little bad. @Ange Tuteur

This code was made for forumotion forums, not for the phpbb3.2 platform.

snows wrote:Hey, i tried using the code but this is how it displayed, please help me out

Did you not notice you posted the numbers, too?  Remove them.

^^^^^^
Yes, the numbers will throw an error in JavaScript, because they're not part of the script. I'm assuming you pasted more than that though. Make sure that you paste the code in Source Mode and NOT WYSIWYG Mode. You can switch the editor mode by clicking the button that has the white piece of paper ; it should be the last button.

Ange Tuteur wrote:^^^^^^
Yes, the numbers will throw an error in JavaScript, because they're not part of the script. I'm assuming you pasted more than that though. Make sure that you paste the code in Source Mode and NOT WYSIWYG Mode. You can switch the editor mode by clicking the button that has the white piece of paper ; it should be the last button.

Yes that was the mistake I made., the code is now working fine. Thanks for your help