Latest topics
» Web Page Speed & Optimization for FAE
by dannig Today at 21:38

» Bootstrap compatibility
by dannig Yesterday at 18:26

» Need Help installing Forumactif Edge Theme
by dannig Yesterday at 12:21

» Forumactif Edge - FRENCH Translation
by Milouze14 Yesterday at 12:05

» Awards
by Ange Tuteur Yesterday at 11:28

» [GAME] Count to One Million!
by Ange Tuteur Yesterday at 11:20

» Forumotion Edge - italian translation
by Ange Tuteur Yesterday at 11:10

» Forumactif Edge Web Page - Italian Translation
by Ange Tuteur Yesterday at 11:07

» [GAME] Post a random picture
by Ange Tuteur Yesterday at 11:02

» Hello!
by brandon_g Yesterday at 09:15

» Profile fields CSS/bbcode stopped working
by dannig Tue 25 Apr 2017, 11:21

» Issues with adjusting centered profile fields
by Ange Tuteur Mon 24 Apr 2017, 11:54

» [GAME] Q&A
by Dr Jay Sun 23 Apr 2017, 14:53

» [GAME] Last Letter Game
by Dr Jay Sun 23 Apr 2017, 14:26

» [GAME] Never have I ever..
by Dr Jay Sun 23 Apr 2017, 14:25

Recent Tutorials
Top posting users this month
Who is online?
In total there are 9 users online :: 1 Registered, 0 Hidden and 8 Guests

dannig

[ View the whole list ]


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

Widget : Friends list

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4480
Points : 9219
Reputation : 2241
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 22 Jan 2016, 17:03

First topic message reminder :

This widget will allow you to display a list of all your friends on your forumotion forum. Along with easy access options for interacting with them. Wink


Click to view demo

It should work on all forum versions with a small chance of inconsistencies. In the event you encounter some difficulties you're free to ask for assistance in this topic.Thumb right

Installation

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

Widget name : Friends list
Use a table type : Yes
Widget title : Friends list
Widget source :
Code:
<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t394-widget-friends-list#3129
-->
<style type="text/css">
#fa_friends_widget { font-size:12px; font-family:Arial, Helvetica, Verdana, Sans-serif; }
#fa_friends_stats { text-align:center; }
#fa_friends_list { max-height:200px; overflow-y:auto; }
.fa_friend_row { margin:10px 0; }
.fa_friend_info { float:left; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; width:90px; }
.fa_friend_online, a.fa_friend_username { color:#999 !important; text-decoration:none; }
.fa_friend_avatar { background:#FFF; border:2px solid #999; height:30px; width:30px; vertical-align:top; margin-right:6px; display:block; float:left; }
.fa_friend_avatar img { height:30px; width:30px; }
.fa_friend_row:hover .fa_friend_online, .fa_friend_row:hover a.fa_friend_username { color:#777 !important; }
.now_online .fa_friend_avatar { border-color:#69C; }
.now_online .fa_friend_online, .now_online a.fa_friend_username { color:#69C !important; }
.fa_friend_row.now_online:hover .fa_friend_online, .fa_friend_row.now_online:hover a.fa_friend_username { color:#47A !important; }
#fa_friends_actions { color:#666; background:#FFF; border:1px solid #CCC; position:absolute; padding:3px 0; z-index:99999; }
#fa_friends_actions a { color:#333; text-decoration:none; padding:4px 12px; display:block; }
#fa_friends_actions a:hover { color:#FFF; background:#38F; }
#fa_friends_actions a.danger:hover { background:#F33; }
#fa_friends_actions .danger { border-top:1px solid #CCC; margin-top:3px; }
</style>

<div id="fa_friends_widget">
  <div id="fa_friends_stats"></div>
  <div id="fa_friends_list">
    <div id="fa_friends_online"></div>
  </div>
</div>

<script type="text/javascript">//<![CDATA[
document.body.insertAdjacentHTML('beforeend', '<div id="fa_friends_actions" style="display:none"></div>');

(function() {
  window.fafl = {
    cache : 5*60*1000,
   
    lang : {
      online : 'Online',
      offline : 'Offline',
      loading : 'Loading friends list..',
      stats : '%{ONLINE} out of %{TOTAL} friends online',
      send_message : 'Send message',
      view_profile : 'View profile',
      view_topics : 'View topics',
      view_posts : 'View posts',
      remove : 'Remove friend',
      delete_friend : 'Are you sure you want to remove %{NAME} from your friends list ?',
      no_friends : 'You have no friends added.'
    },
   
    node : {
      widget : document.getElementById('fa_friends_widget'),
      list : document.getElementById('fa_friends_list'),
      stats : document.getElementById('fa_friends_stats'),
      online : document.getElementById('fa_friends_online'),
      actions : document.getElementById('fa_friends_actions')
    },
   
    lastNode : null,
    toggleActions : function(node) {
      if (fafl.lastNode == node && !/none/.test(fafl.node.actions.style.display)) {
        fafl.node.actions.style.display = 'none';
        fafl.lastNode = null;
      } else {
        var offset = jQuery(node).offset(),
            id = node.href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 }),
            name = jQuery(node).text();
       
        fafl.lastNode = node;
        fafl.node.actions.innerHTML = '<a href="/u' + id + '">' + fafl.lang.view_profile + '</a><a href="/st/' + name + '">' + fafl.lang.view_topics + '</a><a href="/spa/' + name + '">' + fafl.lang.view_posts + '</a><a href="/privmsg?mode=post&u=' + id + '">' + fafl.lang.send_message + '</a><a class="danger" href="/profile?mode=editprofile&page_profil=friendsfoes&remove=' + id + '" onclick="fafl.remove(this, \'' + name + '\');return false;">' + fafl.lang.remove + '</a>';
        fafl.node.actions.style.left = offset.left + 'px';
        fafl.node.actions.style.top = offset.top + 20 + 'px';
        fafl.node.actions.style.display = 'block';
      }
    },
   
    bindActionEvents : function() {
      jQuery(document).on('click', function(e) {
        if (/fa_friend_username/.test(e.target.className)) {
          e.preventDefault();
          fafl.toggleActions(e.target);
        } else if (/block/.test(fafl.node.actions.style.display)) {
          fafl.node.actions.style.display = 'none';
        }
      });
   
      jQuery(fafl.node.actions).mouseleave(function() {
        this.style.display = 'none';
      });
    },
   
    remove : function(node, name) {
      var del = confirm(fafl.lang.delete_friend.replace(/%\{NAME\}/, name));
     
      if (del) {
        if (storage) {
          storage.removeItem('faFriendsWidgetExp');
        }
        window.location.href = node.href;
      }
    },
   
    processed : 0,
    quota : 0
  };
 
  var storage = window.localStorage;
 
  if (storage && storage.faFriendsWidget && storage.faFriendsIdent == _userdata.user_id && storage.faFriendsWidgetExp > +new Date - fafl.cache) {
    fafl.node.widget.innerHTML = storage.faFriendsWidget;
    fafl.node.actions = document.getElementById('fa_friends_actions');
    fafl.bindActionEvents();
  }
 
  else {
    fafl.node.stats.innerHTML = fafl.lang.loading;
 
    jQuery.get('/profile?mode=editprofile&page_profil=friendsfoes', function(d) {
      for (var a = jQuery('div:has(> a[href*="page_profil=friendsfoes&remove"]) a:first-child', d), i = 0, j = a.length, container = document.createElement('DIV'), temp, row; i < j; i++) {
        temp = document.createElement('DIV');
        temp.id = 'fa_friend_u' + a[i].href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 });
        temp.className = 'fa_friend_row';
        temp.innerHTML = '<a href="' + a[i].href + '" class="fa_friend_avatar"><img src="http://illiweb.com/fa/invision/pp-blank-thumb.png"/></a><div class="fa_friend_info"><a href="' + a[i].href + '" class="fa_friend_username">' + jQuery(a[i]).text() + '</a><br/><span class="fa_friend_online">' + fafl.lang.offline + '</span></div><div class="clear"></div>';
        container.appendChild(temp);
      }
     
      if (!j) {
        fafl.node.stats.innerHTML = fafl.lang.no_friends;
        return false;
      }
     
      container.id = 'fa_friends_offline';
      fafl.node.offline = container;
      fafl.node.list.appendChild(container);
      fafl.bindActionEvents();
     
      row = jQuery('.fa_friend_row', container);
      fafl.quota = row.length;
     
      row.each(function() {
        var t = this;
       
        jQuery.get('/' + t.id.slice(10), function(d) {
          var ava = jQuery('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
          jQuery('.fa_friend_avatar img', t).attr('src', ava ? ava.src : 'http://illiweb.com/fa/invision/pp-blank-thumb.png');
             
          if (jQuery('#profile-advanced-right em, .module-title em', d)[0]) {
            t.className += ' now_online';
            jQuery('.fa_friend_online', t).text(fafl.lang.online);
            fafl.node.online.appendChild(t);
          }
         
          if (++fafl.processed == fafl.quota) {
            var online = jQuery('.fa_friend_row', fafl.node.online).length;
            fafl.node.stats.innerHTML = fafl.lang.stats.replace(/%\{ONLINE\}/g, online).replace(/%\{TOTAL\}/g, online + jQuery('.fa_friend_row', fafl.node.offline).length);
             
            if (storage) {
              storage.faFriendsIdent = _userdata.user_id;
              storage.faFriendsWidget = fafl.node.widget.innerHTML;
              storage.faFriendsWidgetExp = +new Date;
            }
          }
        });
      });
    });
  }
}());
// par ange tuteur
//]]></script>

Once you're finished click the save button, then drag and drop the widget to the column you want. So this widget doesn't display for guests, click the permission button on the widget () and untick guests. After that you should have a nicely working friends list ! cheers



Notes


1. By default the friends list must perform a number of asynchronous requests to retrieve information for each friend. Because of this, the data returned is cached for 5 minutes. This prevents the widget from being updated instantaneously every page transition. To modify the cache time, simply find
Code:
cache : 5*60*1000
and modify the cache duration.

2. The language by default is set to English. To change this, find the following lang object and modify the string for each alias. Take care not to edit variables
Code:
%{VARIABLE}
, you are however allowed to move them around.
Code:
    lang : {
      online : 'Online',
      offline : 'Offline',
      loading : 'Loading friends list..',
      stats : '%{ONLINE} out of %{TOTAL} friends online',
      send_message : 'Send message',
      view_profile : 'View profile',
      view_topics : 'View topics',
      view_posts : 'View posts',
      remove : 'Remove friend',
      delete_friend : 'Are you sure you want to remove %{NAME} from your friends list ?',
      no_friends : 'You have no friends added.'
    },

3. Online friends are always displayed at the top of the list in blue, and offline friends are displayed in a gray color. You can change these colors by modifying the CSS at the top of the widget.


If you have any questions, or are having trouble with this widget feel free to let me know below. Enjoy ! Rose


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:22; edited 8 times in total

avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2284
Points : 4370
Reputation : 274
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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 Wed 06 Jul 2016, 03:56

Change it to this:

Code:
.fa_friend_avatar img { height: 30px; width: 30px; border-radius: 30px !important; }
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 640
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Wed 06 Jul 2016, 15:16

Unfortunalety it gives me the same false result:


The blue border should be like the round avatar now
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2284
Points : 4370
Reputation : 274
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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 Thu 07 Jul 2016, 02:59

Maybe it would help if you give us your forum's link and make sure to have the widget activated.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4480
Points : 9219
Reputation : 2241
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 08 Jul 2016, 12:02

Use this CSS rule :
Code:
.fa_friend_avatar, .fa_friend_avatar img {
  border-radius:100%;
}

You must also round the corners of ".fa_friend_avatar" which is the parent container of the avatar. ( img )

Page 2 of 2 Previous  1, 2

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