Widget : Staff Online

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.

Hey man,

how to put the image of the staff as well?

You would need to send multiple requests for the avatar of each staff member, and if you have a lot of staff this could cause you to hit the request limit. This widget is meant to be as light as possible, which is why I chose to only display the username.

Hi buddy only me again after the datacenter update My widget no longer works it don't say the staff that is online anymore.

That is odd. Have you tried clearing your browser cache ? If so, try reducing the cache time on the widget to see if it updates correctly or not.

Fixed it,
All i did was to change the browser cache like you said lol it was just slow as i have a lot of codes running in the background

Ape wrote:Fixed it,
All i did was to change the browser cache like you said lol it was just slow as i have a lot of codes running in the background

I thought that's what it was, good you got it working ! The default is 5 minutes, so if you see the widget before you log in with no staff online, it will cache "No staff online" for 5 minutes before it send another request to /viewonline.

Can this be done with like this /u25 instead of username in the code then have it show the username in the widget?

Ranzer wrote:Can this be done with like this /u25 instead of username in the code then have it show the username in the widget?

Replace your widget with :

Code:

<script type="text/javascript">
myStaff = ['/u1', '/u2'];
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).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>

Is the other way causing problems for you ?

Sorry for the late reply.

Hi, sorry for the late reply also, I'm currently busy at work so not much time to surf.

The code is working great btw thanks for this.

Hello Ange,
Is it possible to add the avatar too in the code?

Dark-Avenger wrote:Hello Ange,
Is it possible to add the avatar too in the code?

Try this :

Widget :

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>

and CSS :

Code:

.monAva img {
  height:25px;
  width:25px;
}
.myStaff a {
  display:inline-block;
  vertical-align:top;
  margin-top:.75em;
}

Bonsoir

Comment enlever les rangs dans le widget?
http://prntscr.com/6ytz2v

http://www.thepassionofgaming.com/

---

Hello!

How to remove ranks in the widget?

http://prntscr.com/6ytz2v

http://www.thepassionofgaming.com/

Thank's

Bonsoir @Maxime,

Trouver le code suivant :

Code:

' #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'

et remplacer par :

Code:

' .forumline td.row1.gensmall:first > img:first'

Bonne soirée et à bientôt.

Bonjour

Tu parles francais!
Sais tu comment ajouter le rang en format texte en dessous du pseudo?
S'il te plait.

Cordialement,

Maxime

Oui ! Je suis en étudiant.

Remplacer le code JavaScript par :

Code:

    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'), t = this;
          jQuery(this).before('<span class="monAva"></span>').prev().load(href + '  .forumline td.row1.gensmall:first > img:first', function(d) {
            jQuery(t).after('<div class="fa-rang">' + jQuery('.forumline td.row1.gensmall:first', d).text().replace(/Rang:\s/,'') + '</div>');
            if (window.localStorage) {
              localStorage.staffOn = jQuery('#theStaff').html();
              localStorage.staffEx = +new Date;
            }
          });
        });
      });
    }

Vous pouvez utiliser .fa-rang dans votre feuille de style, pour le style du rang.

un petit exemple :

Code:

.fa-rang {
  color:red;
  font-size:10px;
  font-weight:bold;
}

à bientôt

Bonsoir,

Je voudrais mettre le rang juste en dessous du pseudo, il faut mettre quoi dans le css? S'il te plait Merci!

UP! Hello, help me please

remplacer le javascript par :

Code:

    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'), t = this;
          jQuery(this).before('<span class="monAva"></span>').prev().load(href + '  .forumline td.row1.gensmall:first > img:first', function(d) {
            jQuery(t).append('<br/><span class="fa-rang">' + jQuery('.forumline td.row1.gensmall:first', d).text().replace(/Rang:\s/,'') + '</span>');
            if (window.localStorage) {
              localStorage.staffOn = jQuery('#theStaff').html();
              localStorage.staffEx = +new Date;
            }
          });
        });
      });
    }

Thanks for the code!

How about making the image in the widget circular? How do I do that?

@JamesPH, use this style:

Code:

.monAva img {
    height: 25px;
    width: 25px;
    background-color: #fff;
    padding: 1px;
    border: 1px solid #ddd;
    border-radius: 100%;
    margin-right: 3px;
}

Just change background-color and the border of your choice.

Nice

@Ange Tuteur is there a way to have the staff widget show a link to the last topic a staff has posted in next to the name?

Distruktion1408 wrote:@Ange Tuteur is there a way to have the staff widget show a link to the last topic a staff has posted in next to the name?

Yes, it's possible by getting this personal page via AJAX.