Latest topics
» Widget : Recent Members
by WinaTickets Today at 03:11

» How To Install the Code Snippet Button
by SLGray Yesterday at 20:56

» Select Button
by SLGray Yesterday at 20:25

» FM Themes
by SLGray Yesterday at 16:48

» User - Made Creations
by SLGray Yesterday at 16:48

» The Football Forums
by Mati Yesterday at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Yesterday at 12:33

» Search Bar Options
by Samantha NL Yesterday at 11:38

» Chit Chat Thread
by Jazeon Yesterday at 05:42

» Christmas logo
by Teo! Yesterday at 03:56

» SyncEditor
by keko_ferkeko Yesterday at 00:31

» Private message bg color
by Mr.Alam Thu 08 Dec 2016, 22:54

» Multi-step Login Form
by Samantha NL Thu 08 Dec 2016, 12:54

» Member of the Month
by Samantha NL Thu 08 Dec 2016, 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Thu 08 Dec 2016, 10:49

Recent Tutorials
Who is online?
In total there are 8 users online :: 1 Registered, 0 Hidden and 7 Guests :: 1 Bot

WinaTickets

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Widget : Staff Online

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 23 Sep 2014, 02:44

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 ! Very Happy


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.


Last edited by Ange Tuteur on Wed 20 Apr 2016, 12:36; edited 3 times in total
Udarsha45
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 812
Reputation : 1
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostUdarsha45 on Fri 26 Sep 2014, 04:43

Hey man,

how to put the image of the staff as well?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 28 Sep 2014, 16:48

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.
Ape

Title :
Gender : Male
Posts : 99
Points : 1049
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Fri 03 Oct 2014, 04:00

Hi buddy only me again after the datacenter update My widget no longer works it don't say the staff that is online anymore. Sad
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 03 Oct 2014, 23:00

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.
Ape

Title :
Gender : Male
Posts : 99
Points : 1049
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Sat 04 Oct 2014, 14:42

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 Wink
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 05 Oct 2014, 15:20

@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 Wink
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.
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1055
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostRanzer on Tue 07 Oct 2014, 07:23

Can this be done with like this /u25 instead of username in the code then have it show the username in the widget?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 09 Oct 2014, 17:39

@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.
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1055
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostRanzer on Mon 20 Oct 2014, 23:07

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. cheers
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 42
Posts : 765
Points : 2029
Reputation : 69
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostVan-Helsing on Tue 25 Nov 2014, 19:50

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

--------

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 28 Nov 2014, 23:05

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;
}
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 615
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostMaxime on Mon 27 Apr 2015, 13:41

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 Very Happy
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 27 Apr 2015, 17:05

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. Smile
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 615
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostMaxime on Wed 29 Apr 2015, 05:41

Bonjour Very Happy

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

Cordialement,

Maxime
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 01 May 2015, 19:00

Oui ! Je suis en étudiant. study

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 pirat
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 615
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostMaxime on Sat 09 May 2015, 11:30

Bonsoir,

Je voudrais mettre le rang juste en dessous du pseudo, il faut mettre quoi dans le css? S'il te plait Very Happy Merci!
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 615
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostMaxime on Sat 30 May 2015, 02:22

UP! Hello, help me please Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 30 May 2015, 17:01

reflect 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;
            }
          });
        });
      });
    }
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 995
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Sat 25 Jul 2015, 04:14

Thanks for the code!
Guest
Guest
View all awards

PostGuest on Wed 20 Apr 2016, 09:22

How about making the image in the widget circular? How do I do that?
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 863
Points : 1901
Reputation : 123
Language : Filipino and Engrish
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://generalaxis.forums.com.bz/

PostWilson on Wed 20 Apr 2016, 10:24

@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.
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 995
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Wed 20 Apr 2016, 11:01

Nice
Distruktion1408
Member
Title :
Distruktion Lord
Gender : Male
Age : 21
Posts : 19
Points : 350
Reputation : 5
Location : Lair of Distruktion
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.venthubinternational.com/ https://www.facebook.com/https://www.facebook.com/cmaRHS

PostDistruktion1408 on Thu 14 Jul 2016, 08:27

@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?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Jul 2016, 08:29

@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.

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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