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

None

[ View the whole list ]


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

Widget : Recent Members

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
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 14 Mar 2016, 11:29

The purpose of this widget is to show a preset amount of members who have logged in recently or are currently active on the forum. Users that are currently online are indicated by a blue border around their avatar.


Click to view demo

The list is updated asynchronously every 5 minutes. So if you're just sitting on the page and the specified cache time passes, the widget will be updated without refreshing the page.

Installation


To install this widget go to Admin Panel > Modules > Forum widgets management and create a new widget with the following settings.

Widget name and title : Recent Members
Use a table type : Yes
Widget source :
Code:
<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t401-widget-recent-members#3233
-->
<style type="text/css">#fa_recent_members { font-size:12px; font-family:Arial, Helvetica, Verdana, Sans-serif; }
.fa_rm_activity { color:#666; }
a.fa_rm_more { color:#69C; border:1px solid #69C; border-radius:3px; font-size:12px; font-family:Arial, Helvetica, Verdana, Sans-serif; text-align:center; display:block; width:100px; padding:3px; margin:auto; transition:250ms; }
a.fa_rm_more:hover { color:#FFF; background:#69C; }
.fa_recent_member { margin-bottom:12px; }
.fa_recent_member a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.fa_recent_member a img { background:#FFF; border:2px solid #999; width:30px; height:30px; vertical-align:top; float:left; margin-right:6px; }
.now_online a img { border-color:#69C; }</style>

<div id="fa_recent_members"></div>
<a href="/memberlist" class="fa_rm_more">See more</a>

<script type="text/javascript">//<[CDATA[
(function() {
  if (!window.FA) window.FA = new Object();
  if (FA.RecentMembers) {
    if (window.console && console.warn) console.warn('FA.RecentMembers has already been initialized');
    return;
  }
 
  FA.RecentMembers = {
    amount : 5, // amount of members to show on the widget
    cache : 5*60*1000, // time the data is cached ; 5 minutes
    refreshRate : 30000, // refresh rate for checking cache expiration
    onlineIndicator : true, // show online indicator on avatar
   
    // DOM node that the widget data will be shown in
    node : document.getElementById('fa_recent_members'),
   
    // get the most recent users from the memberlist
    getRecent : function() {
      FA.RecentMembers.killPoll();
   
      var payload = document.createElement('DIV');
      jQuery.get('/memberlist?change_version=prosilver', function(d) {
        for (var a = jQuery('#memberlist tbody tr:lt(' + FA.RecentMembers.amount + ')', d), i = 0, j = a.length, block, cell; i < j; i++) {
          cell = a[i].getElementsByTagName('TD');
         
          block = document.createElement('DIV');
          block.innerHTML = cell[1].innerHTML.replace(/\?change_version=prosilver|&nbsp;/g, '').replace(/<a /, '<a title="Last Active : ' + cell[4].innerHTML + '"').replace(/<\/a>/, '<div class="fa_rm_activity">' + cell[4].innerHTML + '</div></a>');
          block.className = 'fa_recent_member';
         
          payload.appendChild(block);
        }
       
        FA.RecentMembers.node.innerHTML = payload.innerHTML;
     
        var storage = window.localStorage;
        if (storage) {
          storage.faRecentMembers = payload.innerHTML;
          storage.faRecentMembersExp = +new Date;
        }
       
        if (FA.RecentMembers.onlineIndicator) FA.RecentMembers.checkOnline();
        FA.RecentMembers.setPoll();
      });
    },
   
    // check if the users are currently online
    checkOnline : function() {
      if (!FA.RecentMembers.row) {
        FA.RecentMembers.row = jQuery('.fa_recent_member a', FA.RecentMembers.node);
        FA.RecentMembers.index = -1;
      }
     
      var a = FA.RecentMembers.row[++FA.RecentMembers.index];
      if (a) {
        jQuery.get(a.href, function(d) {
          if (jQuery('#profile-advanced-right em, .module-title em', d)[0]) {
            a.parentNode.className += ' now_online';
          }
          FA.RecentMembers.checkOnline();
        });
      } else {
        if (window.localStorage) window.localStorage.faRecentMembers = FA.RecentMembers.node.innerHTML;
        delete FA.RecentMembers.row;
        delete FA.RecentMembers.index;
      }
    },
   
    // check the cache to see if it has expired
    checkCache : function() {
      var storage = window.localStorage;
      if ((storage && storage.faRecentMembers && storage.faRecentMembersExp < +new Date - FA.RecentMembers.cache) || (!storage || !storage.faRecentMembersExp)) {
        FA.RecentMembers.getRecent();
      }
    },
   
    // set an interval to poll for changes
    setPoll : function() {
      FA.RecentMembers.poll = window.setInterval(FA.RecentMembers.checkCache, window.localStorage ? FA.RecentMembers.refreshRate : FA.RecentMembers.cache);
    },
   
    // kill the interval
    killPoll : function() {
      window.clearInterval(FA.RecentMembers.poll);
    },
   
    poll : null, // interval
   
    // initial setup
    init : function() {
      var storage = window.localStorage;
      if (storage && storage.faRecentMembers && storage.faRecentMembersExp > +new Date - FA.RecentMembers.cache) {
        FA.RecentMembers.node.innerHTML = storage.faRecentMembers;
        FA.RecentMembers.setPoll();
      } else {
        FA.RecentMembers.getRecent();
      }
    }
   
  };
 
  FA.RecentMembers.init();
}());
//]></script>

When you're finished, click the save button and then proceed to adding the widget wherever you want it ! Wink If you want to make some changes please see the next section.


Modifications


Below are some settings that you can change in the widget.

amount : This variable affects the amount of users displayed in the widget. Currently it is set to 5, you can change this to a higher or lower value to show more or less members.

cache : This variable specifies the amount of time the widget data is cached. Currently it is set to 5 minutes ( 5*60*1000 )

refreshRate : This variable determines how frequently the widget checks to see if the cached data has expired. If it has expired the widget will then update the recent members list.

onlineIndicator : This variable allows you to choose whether or not to show the online indicator. Set it to false if you want to disable the online indicator.

style : Lastly if you want to make changes to the style of the widget you can make them by modifying the CSS in the stylesheet at the top of the widget.


If you have any questions or comments feel free to leave them below. Anyway, I hope you like this widget and have fun spying on your members ! Razz


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:31; edited 4 times in total
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Mon 14 Mar 2016, 18:06

Thanks @Ange Tuteur for posting this tutorial. It works great on my two forums.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
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 15 Mar 2016, 05:13

Anytime ! Doff
WinaTickets
New Member
Title :
Gender : Unspecified
Posts : 2
Points : 16
Reputation : 0
Language : french
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostWinaTickets on Thu 24 Nov 2016, 16:00

Bonjour ange tuteur, beau site Smile

ma question : le code est parfait, mais peut-on inverser la liste des membres qui viennent de s'inscrire ?

Donc le premier de la liste serai le dernier membres inscrits .

merci pour votre aide
WinaTickets
New Member
Title :
Gender : Unspecified
Posts : 2
Points : 16
Reputation : 0
Language : french
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostWinaTickets on Fri 25 Nov 2016, 05:31

up
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
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 28 Nov 2016, 12:47

@WinaTickets hi,

In the code, try replacing :
Code:
/memberlist?change_version=prosilver

by :
Code:
/memberlist?mode=joined&order=DESC&submit=Ok&change_version=prosilver&username

You can change what's shown by editing the query "mode=joined" to any of the queries below.
mode=lastvisit
mode=username
mode=interests
mode=posts
mode=website
mode=groups


P.S.
Sorry for the delay, I was off for the holiday and weekend. Victory

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