IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 14 users online :: 0 Registered, 0 Hidden and 14 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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Udarsha45
New Member
Gender : Unspecified
Posts : 3
Points : 1373
Reputation : 1
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ape

Gender : Male
Age : 43
Posts : 136
Points : 1687
Reputation : 29
Location : UK kent
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
View user profile http://missingpeople.darkbb.com

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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ape

Gender : Male
Age : 43
Posts : 136
Points : 1687
Reputation : 29
Location : UK kent
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
View user profile http://missingpeople.darkbb.com

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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ranzer
New Member
Gender : Male
Posts : 4
Points : 1616
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ranzer
New Member
Gender : Male
Posts : 4
Points : 1616
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
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

Gender : Male
Age : 43
Posts : 853
Points : 2699
Reputation : 84
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
View user profile http://itexperts.forumgreek.com/

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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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;
}

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Maxime
New Member
Gender : Unspecified
Posts : 4
Points : 1176
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Maxime
New Member
Gender : Unspecified
Posts : 4
Points : 1176
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Maxime
New Member
Gender : Unspecified
Posts : 4
Points : 1176
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Unspecified
Posts : 4
Points : 1176
Reputation : 0
Language : French
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
View user profile

PostMaxime on Sat 30 May 2015, 02:22

UP! Hello, help me please Smile
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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;
            }
          });
        });
      });
    }

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Beyonder
Member
Gender : Male
Age : 21
Posts : 18
Points : 1556
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Sat 25 Jul 2015, 04:14

Thanks for the code!
avatar
Guest
Guest

PostGuest on Wed 20 Apr 2016, 09:22

How about making the image in the widget circular? How do I do that?
avatar
Wilson

Gender : Unspecified
Age : 31
Posts : 868
Points : 2478
Reputation : 124
Language : Filipino and Engrish
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Male
Age : 21
Posts : 18
Points : 1556
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Wed 20 Apr 2016, 11:01

Nice
avatar
Legionheart
Member
Gender : Male
Age : 22
Posts : 22
Points : 917
Reputation : 6
Location : San Venganza
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
View user profile http://darknessflameacademy.forumotion.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
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

Sponsored content

PostSponsored content

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