Latest topics
» bug in update color
by jlmic Today at 12:04

» Dark Theme Help
by Haggis Yesterday at 21:25

» Forumactif Edge - Greek Translation
by Van-Helsing Yesterday at 18:34

» Auto-suggest Plugin execute Javascript
by MiyakeDev Yesterday at 16:42

» Forumactif Edge - Releases
by Ange Tuteur Yesterday at 15:12

» Forumactif Edge - Arabic Translation
by Ange Tuteur Yesterday at 12:48

» Gateway to Role-Play
by JerriLeah7 Sun 26 Mar 2017, 15:40

» [GAME] Count to One Million!
by brandon_g Sun 26 Mar 2017, 11:51

» Happy Birthday Thread
by brandon_g Sun 26 Mar 2017, 11:50

» Forumactif Edge Web Page - Translations
by Ange Tuteur Sat 25 Mar 2017, 18:06

» Quick Reply Bug
by Ange Tuteur Sat 25 Mar 2017, 17:44

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Sat 25 Mar 2017, 17:40

» Adding text to reputation counter
by Ange Tuteur Thu 23 Mar 2017, 17:19

» Forumactif Edge - Spanish Translation
by Ange Tuteur Thu 23 Mar 2017, 16:24

» How do I add hover examine feature?
by dr.kran Thu 23 Mar 2017, 06:18

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

None

[ 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

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Udarsha45
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 921
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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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.
avatar
Ape

Title :
Gender : Male
Posts : 122
Points : 1215
Reputation : 25
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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.
avatar
Ape

Title :
Gender : Male
Posts : 122
Points : 1215
Reputation : 25
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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.
avatar
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1164
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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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.
avatar
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1164
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
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 42
Posts : 776
Points : 2153
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?

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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;
}
avatar
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 724
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 724
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 724
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!
avatar
Maxime
New Member
Title :
Gender : Unspecified
Posts : 4
Points : 724
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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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;
            }
          });
        });
      });
    }
avatar
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 1104
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!
avatar
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?
avatar
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 868
Points : 2026
Reputation : 124
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.
avatar
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 1104
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
avatar
Legionheart
Member
Title :
The Forum Contractor
Gender : Male
Age : 21
Posts : 22
Points : 465
Reputation : 6
Location : San Venganza
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://darknessflameacademy.forumotion.com/ https://www.facebook.com/https://www.facebook.com/cmaRHS

PostLegionheart 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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9049
Reputation : 2189
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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