[Tutorial] Online staff widget

Page 1 of 2 1, 2  Next

Go down

[Tutorial] Online staff widget Empty [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:
[Tutorial] Online staff widget SJ7wIid

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://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">' + 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: "Não há 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 June 25th 2018, 3:39 pm; edited 15 times in total
Daemon
Daemon
Forumember

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

Code updated!
Daemon
Daemon
Forumember

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty 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..
Broomhilda
Broomhilda
Forumember

Female Posts : 439
Reputation : 58
Language : English
Location : Missouri

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

Back to top Go down

[Tutorial] Online staff widget Empty 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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty 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~
Broomhilda
Broomhilda
Forumember

Female Posts : 439
Reputation : 58
Language : English
Location : Missouri

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

Back to top Go down

[Tutorial] Online staff widget Empty 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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty 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
Broomhilda
Broomhilda
Forumember

Female Posts : 439
Reputation : 58
Language : English
Location : Missouri

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

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

where should i place the code?
Ali Ugbede
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

[Tutorial] Online staff widget Empty 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.


[Tutorial] Online staff widget Slgray10

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

Male Posts : 45912
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
Ali Ugbede
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

[Tutorial] Online staff widget Empty 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?


[Tutorial] Online staff widget Slgray10

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

Male Posts : 45912
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
Valoish
Valoish
Forumember

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

http://www.canvastutorials.org/

Back to top Go down

[Tutorial] Online staff widget Empty 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.


[Tutorial] Online staff widget Slgray10

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

Male Posts : 45912
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
[Tutorial] Online staff widget Tutori10




[Tutorial] Online staff widget Slgray10

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

Male Posts : 45912
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
Ali Ugbede
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

Is it that certain groups do not appear?


[Tutorial] Online staff widget Slgray10

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

Male Posts : 45912
Reputation : 3241
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
Ali Ugbede
Ali Ugbede
Forumember

Posts : 84
Reputation : 1
Language : English

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

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

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

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

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

Well done, @Daemon!! [Tutorial] Online staff widget 1f603
Luiz~
Luiz~
New Member

Male Posts : 17
Reputation : 9
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

@Luiz~ wrote:Well done, @Daemon!! [Tutorial] Online staff widget 1f603
@Luiz~, you're here too... HAHAHAHAH... Thank you!
Daemon
Daemon
Forumember

Posts : 101
Reputation : 85
Language : Português

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

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

Male Posts : 2425
Reputation : 115
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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
[Tutorial] Online staff widget CrcJIbc
YanZKinG
YanZKinG
Forumember

Male Posts : 25
Reputation : 3
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

Bump.
YanZKinG
YanZKinG
Forumember

Male Posts : 25
Reputation : 3
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty 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>

[Tutorial] Online staff widget Screen98
skouliki
skouliki
Manager
Manager

Female Posts : 6364
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

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

Nice!
Ungreli
Ungreli
New Member

Posts : 1
Reputation : 1
Language : Português

http://nwdgames.net

Back to top Go down

[Tutorial] Online staff widget Empty 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>

[Tutorial] Online staff widget Screen98

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

Male Posts : 25
Reputation : 3
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

Post by YanZKinG on September 22nd 2017, 3:23 pm

bump.
YanZKinG
YanZKinG
Forumember

Male Posts : 25
Reputation : 3
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

Post by Van-Helsing on September 23rd 2017, 5:08 pm

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
Van-Helsing
Hyperactive

Male Posts : 2425
Reputation : 115
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

[Tutorial] Online staff widget Empty Re: [Tutorial] Online staff widget

Post by YanZKinG on September 29th 2017, 4:08 pm

@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 ?
YanZKinG
YanZKinG
Forumember

Male Posts : 25
Reputation : 3
Language : English, Filipino
Location : Philippines

http://destroymus4.forumotion.com/

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top


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