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">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.218072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {

    function staffOnline() {

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

        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);

        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");

                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;

                            var xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);

                            xhr2.onload = function() {
                                 if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.querySelector("img[alt='avatar']").src;
                                    elLi =
                                    "<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://hitsk.in/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };

                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };

                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };

        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };

        xhr1.send();
    }

    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#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"}
];

Smile


Last edited by Daemon on July 22nd 2017, 1:01 am; edited 14 times in total
avatar
Daemon
Forumember

Posts : 51
Reputation : 29
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 : 51
Reputation : 29
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 : 369
Reputation : 42
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 : 51
Reputation : 29
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 : 369
Reputation : 42
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 : 51
Reputation : 29
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 : 369
Reputation : 42
Language : English
Location : Missouri

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

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Ali Ugbede on July 6th 2017, 11:06 pm

where should i place the code?
avatar
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

Re: [Tutorial] Online staff widget

Post by SLGray on July 7th 2017, 1:28 am

Ali Ugbede wrote:where should i place the code?
Create a customized widget.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Ali Ugbede on July 7th 2017, 7:12 am

i did that, but the code seems not working in my forum
avatar
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

Re: [Tutorial] Online staff widget

Post by SLGray on July 7th 2017, 7:11 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Valoish on July 7th 2017, 9:20 pm

@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
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by SLGray on July 7th 2017, 9:34 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by SLGray on July 8th 2017, 3:57 am

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





When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Ali Ugbede on July 8th 2017, 5:41 pm

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
avatar
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

Re: [Tutorial] Online staff widget

Post by SLGray on July 8th 2017, 8:11 pm

Is it that certain groups do not appear?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Ali Ugbede on July 8th 2017, 10:38 pm

The code is not  reading properly in my forum
avatar
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on July 16th 2017, 6:02 pm

The code has been updated!!!!! Very Happy
avatar
Daemon
Forumember

Posts : 51
Reputation : 29
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on July 17th 2017, 9:44 pm

Code updated again! The previous version contained some errors.
avatar
Daemon
Forumember

Posts : 51
Reputation : 29
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Luiz~ on July 17th 2017, 9:47 pm

Well done, @Daemon!!
avatar
Luiz~
New Member

Male Posts : 16
Reputation : 7
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Daemon on July 17th 2017, 9:53 pm

Luiz~ wrote:Well done, @Daemon!!
@Luiz~, you're here too... HAHAHAHAH... Thank you!
avatar
Daemon
Forumember

Posts : 51
Reputation : 29
Language : Português

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Van-Helsing on July 17th 2017, 10:45 pm

Hello,
Excellent job @Daemon. Hello
avatar
Van-Helsing
Hyperactive

Male Posts : 2306
Reputation : 90
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by YanZKinG on August 22nd 2017, 10:35 am

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 Very Happy my forum version is modernBB, i hope you could help me. Thanks a lot
avatar
YanZKinG
New Member

Male Posts : 7
Reputation : 1
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by YanZKinG on September 1st 2017, 4:39 am

Bump.
avatar
YanZKinG
New Member

Male Posts : 7
Reputation : 1
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by skouliki on September 1st 2017, 7:47 am

hello 

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

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

avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 2894
Reputation : 439
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Online staff widget

Post by Ungreli on September 5th 2017, 6:03 am

Nice!
avatar
Ungreli
New Member

Posts : 1
Reputation : 1
Language : Português

http://nwdgames.net

Back to top Go down

Re: [Tutorial] Online staff widget

Post by YanZKinG on September 12th 2017, 5:30 pm

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
avatar
YanZKinG
New Member

Male Posts : 7
Reputation : 1
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by YanZKinG Yesterday at 3:23 pm

bump.
avatar
YanZKinG
New Member

Male Posts : 7
Reputation : 1
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.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