Latest topics
» FM Themes
by SLGray Today at 16:48

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

» The Football Forums
by Mati Today at 15:22

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

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

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

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

None

[ View the whole list ]


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

Widget : Friends list

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 : 8395
Reputation : 2010
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 22 Jan 2016, 17:03

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
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2174
Points : 4072
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 Sat 23 Jan 2016, 16:33

Thanks for sharing this amazing tutorial.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 23 Jan 2016, 16:45

No problem ! Smile
SarkZKalie
Member
Title :
Exodia the Forbidden One
Gender : Male
Age : 25
Posts : 21
Points : 1081
Reputation : 11
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostSarkZKalie on Mon 25 Jan 2016, 07:28

It works perfect Very Happy But in my page, I think it conflicts with other libraries/script, so it doesn't show anything when I'm left-click on it. Take a look here.

Test Account:

ID: Calypso
PW: qaz!@#456
Any solutions? Very Happy

Thanks for sharing this, Katty! Twisted Evil


Last edited by SarkZKalie on Mon 25 Jan 2016, 13:25; edited 1 time in total (Reason for editing : Wrong type lol)
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 25 Jan 2016, 12:37

I can't login with the provided information, but I think it might be a problem related to overflow. So find this part in the CSS :
Code:
#fa_friends_actions { color:#666; background:#FFF; border:1px solid #CCC; position:absolute; padding:3px 0; z-index:99999; }

and change it to this :
Code:
#fa_friends_actions { color:#666; background:#FFF; border:1px solid #CCC; position:fixed; padding:3px 0; z-index:99999; }

Code:
position:absolute;
>>>
Code:
position:fixed;

I might change that in the first post as well.
Ape

Title :
Gender : Male
Posts : 99
Points : 1048
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Mon 25 Jan 2016, 23:43

I love it Wink good job i have already made a change the the colour of the online members to green

Now just a little thing i want to ask before i set it free on my members

Is there away to have it so when you hover over a online member it shows where the member is viewing on the forum ? i know im a pain in the butt but i like to make you work lol and you know you love making a change to your codes Razz

If this is to much to ask then its fine.

APE
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 26 Jan 2016, 11:38

Hey @Ape,

It's possible, however, it's not without its quirks.. The only way to see what a user is viewing is by sending a request to the /viewonline page. Here's the catch though, if these other users are online they'll also be sending a request to that same page, so everyone would appear to be viewing the "viewonline page" instead of what they're really viewing.. reflect

Some data that would be unique ( and possible to pull ) is the stuff on the statistics page. Like the last visit info for example.
http://fmdesign.forumotion.com/u1stats
Ape

Title :
Gender : Male
Posts : 99
Points : 1048
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Tue 26 Jan 2016, 12:55

yeah just sounds to much to look at for the widget so i think its more bother then it is worth lol Thanks anyway for looking at it Wink

it would have been nice but a big pain in the BUTT lol

Thanks anyways Razz
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 26 Jan 2016, 13:17

Yeah, I would've did it, but 99% of the time it shows people looking at the viewonline page. It's to be expected though since were "getting" that page via JavaScript. I did consider putting the last visit time from the stats page for offline users, though. Only problem with that is keeping it on one line. Laughing
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 63
Points : 1000
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Wed 27 Jan 2016, 01:02

thanks!!
SarkZKalie
Member
Title :
Exodia the Forbidden One
Gender : Male
Age : 25
Posts : 21
Points : 1081
Reputation : 11
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostSarkZKalie on Wed 27 Jan 2016, 08:15

Is there anyway to display friend's online status without activating advanced profile? Several functions didn't work on simple mode Sad If possible, can you please make a new lite version of this widget?



Code:
Nav bar -> Plus -> Quick Navigation
Thank you so much, Katty! Very Happy
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Wed 27 Jan 2016, 12:15

Hmm for the simple profile try replacing the following in the widget :
Code:
jQuery('#profile-advanced-right em, .module-title em', d)[0]

with this :
Code:
jQuery('strong:contains(Online)', d)[0]
FYI if your board is another language you'll have to replace "Online" with what's displayed in your language.

If I find a better indicator I'll let you know.
SarkZKalie
Member
Title :
Exodia the Forbidden One
Gender : Male
Age : 25
Posts : 21
Points : 1081
Reputation : 11
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostSarkZKalie on Sat 30 Jan 2016, 10:48

TYSM work like a charm! cheers
Jazeon

Title :
アビスウォーカー
Gender : Unspecified
Posts : 102
Points : 460
Reputation : 26
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://foruminion.forumotion.com/

PostJazeon on Wed 17 Feb 2016, 20:53

Nice work, I like how it has an indicator to highlight online users.
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 863
Points : 1900
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 06 Apr 2016, 07:10

Nice tutorial but the actions aren't showing up for me. Tried the fixed position, doesn't work.

Test Account:
Username: MrGiveYoGirlBack
Password: maymay
Forum: Gave you the forum url before. Very Happy

--------

A banana a banana does not banana doctor banana. -Poetic
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Wed 06 Apr 2016, 11:03

@Wilson wrote:Nice tutorial but the actions aren't showing up for me. Tried the fixed position, doesn't work.

Test Account:
Username: MrGiveYoGirlBack
Password: maymay
Forum: Gave you the forum url before. Very Happy
Could you send me the URL via PM ? I know it's not the beta forum, and the other forum you sent via PM awhile back gives me a DNS error. Confused
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 863
Points : 1900
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 06 Apr 2016, 11:16

Oops sorry! I forgot I changed it a while ago. Smile PM sent.

--------

A banana a banana does not banana doctor banana. -Poetic
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Wed 06 Apr 2016, 11:26

I made a test by forcing the users from the memberlist and the actions appeared once they're loaded :


Are the actions not appearing at all when you click on their username ?
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 863
Points : 1900
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 06 Apr 2016, 11:45

Oh. I just tested it, it showed up, but before it didn't. I believe because my developer tools is on the screen and the position of it is also fixed, so whenever I scroll down, it doesn't show up. Sorry I was wrong Smile

Still, is there anyway I can make it show without the action fixed in position? So when you scroll down, it won't follow you? Absolute position doesn't work in a way.

I'm sorry for borrowing your time. Smile

--------

A banana a banana does not banana doctor banana. -Poetic
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Wed 06 Apr 2016, 12:43

Hmm.. it's caused by an overuse of overflow to clear floats, so the elements get cut off if they overflow their container. ( the devs of punbb are to blame Razz ) I suppose if you add the actions to the body instead it might work. Try replacing the widget contents with this :
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[
(function() {
  document.body.insertAdjacentHTML('beforeend', '<div id="fa_friends_actions" style="display:none"></div>');
 
  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>

You may or may not need to clear your cache. Let me know if that works for you. Salute
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 30
Posts : 863
Points : 1900
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 06 Apr 2016, 13:02

Works like a charm! Thanks! Very Happy

--------

A banana a banana does not banana doctor banana. -Poetic
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Wed 06 Apr 2016, 13:04

Great Yes I'll apply this update to the first post then. Wink
Bigtuber

Title :
Gender : Male
Posts : 93
Points : 431
Reputation : 40
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostBigtuber on Sun 03 Jul 2016, 18:23

Great widget, good job!
But I have a question here.

Is it possible to round the avatars like this? Smile
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2311
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 04 Jul 2016, 04:58

@bigtuber57 change line 14 of the widget code to this

Code:
.fa_friend_avatar img { height: 30px; width: 30px; border-radius: 30px; }
Bigtuber

Title :
Gender : Male
Posts : 93
Points : 431
Reputation : 40
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostBigtuber on Tue 05 Jul 2016, 21:22

Hey @Ace 1,

thanks for the tip but there is a problem:


Then I deleted the red border but how do I get a round border?


Got some false results^^

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