[Tutorial] Online staff widget

This code serves to create a widget with online team members.

Image:


Create a custom widget with the following content:

Code:

<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 14/06/2018
 *  Version: 2.014062018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
jQuery(function() {

    function staffOnline() {

        var staff = [
            {group: "Administrator", color: "FF0000"},
            {group: "Moderator", color: "008C09"},
            {group: "Helper", color: "D69A45"}
        ];

        jQuery.get("/viewonline", function(data) {
            staffWidget.html("");
            // variables
            var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data);
            // List each item in the array
            jQuery.each(staff, function(i, val) {
                var staffColor = table.find("span[style*='" + val.color + "']");
                // Check span elements that contain array colors
                if (typeof(staffColor) != "undefined" && staffColor != null) {
                    // For each existing color
                    jQuery.each(staffColor, function(i, el) {
                        var stafferHref = jQuery(el).closest("a").attr("href");
                        jQuery.get(stafferHref, function(data2) {
                            var stafferName = jQuery(el).closest("a").parent().html(),
                                stafferId = stafferHref.split("/u")[1],
                                avatarSrc = jQuery(".module", data2).find("img").attr("src");
                            staffWidget.append(
                                '<li class="online_staff clearfix">' +
                                '  <div class="div-icon-staff">' +
                                '    <div class="staff-avatar"><img src="' + avatarSrc + '" alt="avatar"></div>' +
                                '  </div>' +
                                '  <div class="div-main-staff">' +
                                '    <div class="staff-mp"><a href="/privmsg?mode=post&u=' + stafferId + '"><img src="https://2img.net/s/t/18/09/33/i_icon_pm.png" title="Send PM"></a></div>' +
                                '    <div class="staff-name">' + stafferName + '</div>' +
                                '    <p class="staff-rank">' + val.group + '</p>' +
                                '  </div>' +
                                '</li>'
                            );
                            sessionStorage.setItem("online_staff", staffWidget.html());
                        }); // end request 2
                    }); // end each staffColor
                }// end if
            });// end each staff
        });// end request 1
    }
 
    var staffWidget = jQuery("#staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    staffWidget.html((storedValue !== null) ? storedValue : staffOnline());

    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes

});
</script>
<style type="text/css">
#staff_widget {padding: 0;}
#staff_widget:empty:before {
    content: "No staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>

To add groups and their colors, edit in the following lines of code:

Code:

var staff = [
    {group: "Administrator", color: "FF0000"},
    {group: "Moderator", color: "008C09"},
    {group: "Helper", color: "D69A45"}
];

Code updated!

I like this idea Daemon..but not sure how it works or where to put it..and I am so computer stupid that I am not understanding where and how to add the staff in the second group..and where or how to add the second group of codes into the first set of codes..sorry

Can you explain and help me with this in baby steps please..

Thank you Daemon..

Of course I can! Each group in the forum usually has a different color! Right?
So... Let's suppose that the Administrators group has the color "FF0000", and that the group of moderators has the color "008C09", the members of each of these groups will have the nick of the same color of the group, right?
In this code you will add the groups that are part of the team and their respective colors. The code will make a request on the "/viewonline" page, taking the nickname of the members with the respective colors of the groups that are part of the team.


To do this, just look for the following part of the code:

Code:

var staff = {
    "Administrator": "FF0000",
    "Moderator": "008C09",
    "Helper": "D69A45"
};

So just add the names of the groups and their respective colors.

lol..ok I understand that part of it..now what I am confused is once I copy and paste that first part..this

<ul id="staff_widget"></ul>

<script type="text/javascript">
/*
Code: Online staff widget
Date: 18/07/2014
Last Updated: 01/03/2017
By: Daemon
*/
jQuery(document).on("ready", function() {

var staffWidget = jQuery("#staff_widget");

and I put this in the Javascript code management right..and I don't change a thing right..now..where do I put this part

var staff = {
"Administrator": "FF0000",
"Moderator": "008C09",
"Helper": "D69A45"
};

right under the first codes..

and I just change the colors to what I want..

Then after that..how do I get that to the Widget that I create..Staff Online..

Sorry..I'm not more computer literate lol..

Thank you Daemon

--

I want to thank you for your tutorial..and just found out that we have different forums..so yours wouldn't work..this person helped me out and added the Staff Online for me with another code..

I also wanted to thank you for your help..

Awesome tutorial and the Staff Online..post

I updated the code to work on "PunBB, PHPBB3, PHPBB2, and Invision".

That is so nice that you made it for all the forums..thank you Daemon..

Great job..

where should i place the code?

Ali Ugbede wrote:where should i place the code?

Create a customized widget.

i did that, but the code seems not working in my forum

Did you change the part of the code of the colors and names of your groups?

@SLGray; I tried it as well and the code just doesn't get read properly
http://prntscr.com/fsxa5h

I did change the colors and names of the groups and still nope. x_x

Well, I can tell  you it works on my #ModernBB forums.

Here is a screenshot to show that it does work on #ModernBB

SLGray wrote:Did you change the part of the code of the colors and names of your groups?

Yes I changed the colors and  the name of the groups in the code,  still it dnt  work

Is it that certain groups do not appear?

The code is not  reading properly in my forum

The code has been updated!!!!!

Code updated again! The previous version contained some errors.

Well done, @Daemon!!

Luiz~ wrote:Well done, @Daemon!!

@Luiz~, you're here too... HAHAHAHAH... Thank you!

Hello,
Excellent job @Daemon.

Hi First of all Thank you sir @Daemon for sharing this .. we appreciate it verymuch. Now, im having a small problem i want to appear the online user to the left of the widget, how to do that ? ive already change the code the bottom part of the code the padding margins etc. but still the user appear in the center of the widgets sorry for being a noob my forum version is modernBB, i hope you could help me. Thanks a lot

Bump.

hello 

maybe you can try to align all the code using this button 

<div align="left">... code... </div>

Nice!

skouliki wrote:hello 

maybe you can try to align all the code using this button 

<div align="left">... code... </div>

Thanks for the response, But its not working still the code appear in the middle

bump.

Hello,
You can place the whole code between HTML tags

Code:

<center>code</center>

for center

or for left

Code:

<left>code</left>

and for right

Code:

<right>code</right>

then you can adjust it with CSS code as you wish.

Van-Helsing wrote:Hello,
You can place the whole code between HTML tags

Code:

<center>code</center>

for center

or for left

Code:

<left>code</left>

and for right

Code:

<right>code</right>

then you can adjust it with CSS code as you wish.

none of this works, i don't know maybe its because of my forum version ? or maybe its in the code itself ? what should i change ?