The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Online staff widget

View previous topic View next topic Go down

[Tutorial] Online staff widget

Post by Daemon on March 1st 2017, 3:28 pm

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">
  /*
    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");
 
    function staffOnline() {
 
      var staff = {
        "Administrator": "FF0000",
        "Moderator": "008C09",
        "Helper": "D69A45"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Loading...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("No staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery("#profile-advanced-right .module:eq(0) img:eq(0), .forumline td.row1.gensmall:first img:eq(0)", e).attr("src"); // PunBB, PHPBB3, Invision, PHPBB2
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script>
<style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 5px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 3px;
  }
  #staff_widget .span-avatar {
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 1px;
    width: 30px;
  }
</style>

To add groups and their colors, edit in the following lines of code:
Code:
var staff = {
  "Administrator": "FF0000",
  "Moderator": "008C09",
  "Helper": "D69A45"
};

Tested only in PunBB version

Smile


Last edited by Daemon on March 11th 2017, 10:29 pm; edited 3 times in total
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on March 3rd 2017, 9:09 pm

Code updated!
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Broomhilda on March 4th 2017, 1:12 am

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..
avatar
Broomhilda
Forumember

Female Posts : 347
Reputation : 40
Language : English
Location : Missouri

http://broomhildassims2.my-freeforum.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on March 4th 2017, 3:56 am

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.

Very Happy
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Broomhilda on March 4th 2017, 7:17 am

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

~1~
avatar
Broomhilda
Forumember

Female Posts : 347
Reputation : 40
Language : English
Location : Missouri

http://broomhildassims2.my-freeforum.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on March 4th 2017, 1:47 pm

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


Last edited by Daemon on March 4th 2017, 8:57 pm; edited 1 time in total
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Broomhilda on March 4th 2017, 6:12 pm

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

Great job.. Good
avatar
Broomhilda
Forumember

Female Posts : 347
Reputation : 40
Language : English
Location : Missouri

http://broomhildassims2.my-freeforum.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum