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

djblah, SLGray

[ View the whole list ]


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

Profile Popup [Tab testing]

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 : 4675
Points : 9689
Reputation : 2331
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 23 Jan 2014, 12:24

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello,

Here in this topic you will be able to test the profile popup with tabs. These tabs allow you to view more information on the user, simply making it a "quick view" profile.

Example : Click => Ange Tuteur

If you do not know how to install this then please read the tutorial on the Support forum.
http://help.forumotion.com/t128644-profile-details-popup#861220

Replace your old popup script with the one below and save :
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management

This is the development script, the comments will let you know what does what in case you wish to edit.
Code:
$(function () {
  if (/\/u\d+/.test(location.pathname) == true) return;
   
  var settings = {
          wall : 1,
          stats : 1,
    attachments : 0,
        friends : 1,
        contact : 1,
            rpg : 0,
          close : 1,
          avatar: 0
  };
   
  var a = document.getElementsByTagName('A');
  for (i = 0; i < a.length; i++) {
    if (/\/u\d+/.test(a[i].href) == true) a[i].className = a[i].className + ' profilePopup';
  }
   
 $('.profilePopup:has(img)').removeClass('profilePopup');
   
  if (settings.wall == 1) var userWall = '<span class="propop_tab" id="propop_vm">Visitor messages</span>';
  else var userWall = '';
   
  if (settings.stats == 1) var userStats = '<span class="propop_tab" id="propop_stats">Statistics</span>';
  else var userStats = '';
 
  if (settings.attachments == 1) var userAttachments = '<span class="propop_tab" id="propop_attach">Attachments</span>';
  else var userAttachments = '';
   
  if (settings.friends == 1) var userFriends = '<span class="propop_tab" id="propop_friends">Friends</span>';
  else var userFriends = '';
   
  if (settings.contact == 1) var userContact = '<span class="propop_tab" id="propop_contact">Contact</span>';
  else var userContact = '';
   
  if (settings.rpg == 1) var userRpg = '<span class="propop_tab" id="propop_rpg">Character sheet</span>';
  else var userRpg = '';
   
  if (settings.close == 1) var userClose = '<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>';
  else var userClose = '';

 $('.profilePopup').click(function(){

        var UID = $(this).attr('href');
        var UNM = $(this).text();
        var SEL = '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details';
        var LOAD = '<center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center>';
        var TAB = '#propop_profile, #propop_vm, #propop_stats, #propop_friends, #propop_contact, #propop_rpg, #propop_attach, #propop_close';

        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;-moz-box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div class="profile_popup_nav">'+ userWall + '<span class="propop_tab" id="propop_profile">Profile</span>' + userStats + userAttachments + userFriends + userContact + userRpg + userClose +'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/, '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/, '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/\s+/, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

        $('#userprofile').load(UID + SEL);
        if (settings.avatar == 1) $('#userAVA').load(UID + ' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
        $('#propop_profile').addClass('activeTab');

        $('#propop_profile').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + SEL);
        });

        $('#propop_vm').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
        });

        $('#propop_stats').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
        });

        $('#propop_friends').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
        });

        $('#propop_contact').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
        });
   
      $('#propop_rpg').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'rpg' + SEL);
        });
   
      $('#propop_attach').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'attachments' + SEL);
        });

        if (!document.getElementById('logout')) $('#interactionLinks').remove();

        $('#profilefilter, #close_popup').click(function () { $('#profilefilter, #profcont-container').remove() });
        return false;
    });
});

Now add this to your CSS stylesheet to style the tabs and submit :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet

The default theme is gray/silver and can be changed.
Code:
/* Profile details popup */
#userAVA img{
    position:absolute;
    top:43px;
    right:30px;
    height:50px;
    width:50px;
}

.profile_popup_nav {
    background:rgba(0,0,0,0.1);
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    border-bottom:1px solid #AAA;
    -webkit-border-radius:5px 5px 0px 0px;
       -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
}

.propop_tab {
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
       -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #AAA;
    border-bottom:none;
    -webkit-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
       -moz-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
            box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
    background:#BBB;
    margin:0 2px;
    padding:3px;
}

.propop_tab:hover {
    position:relative;
    top:1px;
    color:#D41141;
    background-color:#D1D1D1;
}

.propop_tab.activeTab {
    position:relative;
    top:1px;
    color:#D41141;
    background-color:#D1D1D1 !important;
}

#profileLinks {
    background:rgba(0,0,0,0.1);
    display:block;
    padding:3px;
    margin:10px -4px -4px -4px;
    border-top:1px solid #AAA;
    -webkit-border-radius:0px 0px 5px 5px;
       -moz-border-radius:0px 0px 5px 5px;
            border-radius:0px 0px 5px 5px;
}

Result :
You will now be able to test the tabs. Clicking each tab will load another part of the users profile.


In the script you can toggle the tabs and some extra features :
Code:
 var settings = {
           wall : 1,
          stats : 1,
    attachments : 0,
        friends : 1,
        contact : 1,
            rpg : 0,
          close : 1,
          avatar: 1
  };

Set an option as '1' to activate it, and set it to 0 to deactivate it.

As mentioned this topic is for reported bugs, feedback, ect.. You can leave a post below if you have any.

Many thanks in advance for your feedback.


Last edited by Ange Tuteur on Wed 23 Apr 2014, 01:10; edited 11 times in total
avatar
Selvester
Member
Title :
Gender : Female
Age : 23
Posts : 19
Points : 1365
Reputation : 8
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostSelvester on Sat 25 Jan 2014, 17:46

This is awesome! You have done a wonderful job yet again. I'm only on briefly right now but I will definitely have to take a closer look at it later.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 25 Jan 2014, 18:19

Thanks ! Very Happy

If you encounter any bug let me know. So far it has worked nicely, I may try to improve the active tabs when I am a bit better. (You can reload the tab you're on by clicking it again) It should be easy, but right now I'll relax and let people test. Smile
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 02 Feb 2014, 21:39

Hello,

I am replying to inform that the profile popup has been updated.

Clicking the currently active tab will no longer reload itself. Additionally the user avatar will now display in the popup. The CSS has also been updated, be sure to update it since it contains CSS to resize the ava.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2398
Points : 4613
Reputation : 282
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 Mon 03 Feb 2014, 00:10

I have not encountered any issues with it yet.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 03 Feb 2014, 03:55

That is good to hear, thanks. Smile
avatar
Typlo
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 1254
Reputation : 2
Language : Portuguese
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostTyplo on Sat 22 Mar 2014, 12:40

A nice work Ange! Thanks by share the code! Very Happy
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 22 Mar 2014, 15:36

You're welcome and thanks ! Very Happy
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Mon 07 Apr 2014, 20:48

I have a suggestion , adding  a close button on the top right corner ( i know the popup can be closed by clicking somewhere else on the forum , but this will make it work even better )

I also suggest the same for the Topic Preview tutorial.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 08 Apr 2014, 01:02

Adding a close button to this should be pretty easy. I've added it to the navbar, if you want it, replace your script with :
Code:
$(function () {
    $('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], p.author a[href*="/u"], form:has(.vf_jumpbox)~a[href*="/u"], .tcr a[href*="/u"], #stats a[href*="/u"], #onlinelist a[href*="/u"], .tcl.tdtopics a[href*="/u"], .pun .user a[href*="/u"], .ipbtable .row1 a[href*="/u"], #fo_stat a[href*="/u"], .activeusers-box a[href*="/u"], td.row3.over a[href*="/u"], .forumline:has(#i_whosonline) a[href*="/u"], span.name a[href*="/u"], span.postdetails a[href*="/u"], #info_open a[href*="/u"]').attr('id', 'profilePopup').click(function(){
        return false
    });
      
   $('a[href*="/u"]:has(img)').removeAttr('id').click( function(){
        window.open($(this).attr('href'),'_self');
    });
      
     
   $('a#profilePopup').click(function(){

        var UID = $(this).attr('href');
        var UNM = $(this).text();
        var SEL = '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details';
        var LOAD = '<center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center>';
        var TAB = '#propop_profile, #propop_vm, #propop_stats, #propop_friends, #propop_contact';

        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div class="profile_popup_nav"><span class="propop_tab" id="propop_vm">Wall</span><span class="propop_tab" id="propop_profile">Profile</span><span class="propop_tab" id="propop_stats">Stats</span><span class="propop_tab" id="propop_friends">Friends</span><span class="propop_tab" id="propop_contact">Contact</span><span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span></div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/ /, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

        $('#userprofile').load(UID + SEL);
        $('#userAVA').load(UID + '#profile-advanced-right .module .inner div img:eq(0)');
        $('#propop_profile').addClass('activeTab');

        $('#propop_profile').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + SEL);
        });

        $('#propop_vm').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
        });

        $('#propop_stats').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
        });

        $('#propop_friends').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
        });

        $('#propop_contact').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
        });

        if (!document.getElementById('logout')) {
            $('#interactionLinks').remove();
        }

        $('#profilefilter, #close_popup').click(function () {
            $('#profilefilter, #profcont-container').remove();
        });
    return false;
    });
});

Result :
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Tue 08 Apr 2014, 14:16

Splendid but i have 2 issues with this

1. The avatar doesn't show.
2. At the bottom links only "View Profile" is visible (it was the same with the official tutorial).

--------

You'll never be alone again
You'll never die again
You'll never be born again
You'll forever be, stuck here in eternity


avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 08 Apr 2014, 23:34

1. ) Are you using phpbb3 ? The avatar currently is only for phpbb3, it will be available for other versions in the future.

2. ) Are you using the default navbar ? If the default logout navlink does not exist, then those options will not show up as you will be considered as 'offline'. I could make a fallback by using fa userdata, but you would need to have the toolbar active.
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Wed 09 Apr 2014, 01:39

1. Nah I'm using old fashion phpbb2 Very Happy anyway guess i'll wait for the avatar to be available for all versions then

2. Yeah I'm using a custom navbar , btw i fixed that issue with adding the old navbar codes and setting the display for it to none.

--------

You'll never be alone again
You'll never die again
You'll never be born again
You'll forever be, stuck here in eternity


avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 Wed 09 Apr 2014, 07:19

Hello,

I've updated the code in the first post.

► Close button
The close button is to the far right of the navigation bar. Clicking this closes the popup.

► Avatar support
The avatar of the user now displays in all forum versions.

► CSS updated
The CSS has also been updated for better property support.

avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Tue 15 Apr 2014, 20:37

Hmm , the rank image also seems to display at the same position as the avatar , it's over the avatar actually , how to remove the rank image shown in the profile popup ?

--------

You'll never be alone again
You'll never die again
You'll never be born again
You'll forever be, stuck here in eternity


avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 17 Apr 2014, 20:05

I'll have to take a look at it later to see what the problem is. Thanks for reporting.
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Sat 19 Apr 2014, 23:49

Ok i noticed that the rpg tab was missing and if anyone is using the rpg system and wants the tab then simply update the code to this.

Spoiler:

Code:
$(function () {
    $('li.row a[href^="/u"], .img-whois+p a[href^="/u"], .page-bottom a[href^="/u"], .postprofile a[href^="/u"], p.author a[href^="/u"], form:has(.vf_jumpbox)~a[href^="/u"], .tcr a[href^="/u"], #stats a[href^="/u"], #onlinelist a[href^="/u"], .tcl.tdtopics a[href^="/u"], .pun .user a[href^="/u"], .ipbtable .row1 a[href^="/u"], #fo_stat a[href^="/u"], .activeusers-box a[href^="/u"], td.row3.over a[href^="/u"], .forumline:has(#i_whosonline) a[href^="/u"], span.name a[href^="/u"], span.postdetails a[href^="/u"], #info_open a[href^="/u"]').attr('id', 'profilePopup').click(function(){
        return false
    });
    
 $('a[href*="/u"]:has(img)').removeAttr('id').click( function(){
        window.open($(this).attr('href'),'_self');
    });
    
  
 $('a#profilePopup').click(function(){

        var UID = $(this).attr('href');
        var UNM = $(this).text();
        var SEL = '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details';
        var LOAD = '<center><span class="profileLoading" style="font-weight:bold;font-size:18px;color:black;">Loading...</span></center>';
        var TAB = '#propop_profile, #propop_vm, #propop_stats, #propop_friends, #propop_contact, #propop_rpg';

        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div class="profile_popup_nav"><span class="propop_tab" id="propop_vm">Wall</span><span class="propop_tab" id="propop_profile">Profile</span><span class="propop_tab" id="propop_stats">Stats</span><span class="propop_tab" id="propop_friends">Friends</span><span class="propop_tab" id="propop_contact">Contact</span><span class="propop_tab"
id="propop_rpg">RPG</span><span class="propop_tab"  id="close_popup" style="float:right;margin-top:-4px;">Close</span></div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/ /, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

        $('#userprofile').load(UID + SEL);
        $('#userAVA').load(UID + ' #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');
        $('#propop_profile').addClass('activeTab');

        $('#propop_profile').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + SEL);
        });

        $('#propop_vm').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
        });

        $('#propop_stats').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
        });

        $('#propop_friends').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
        });

        $('#propop_contact').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
        });

        $('#propop_rpg').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'rpg' + SEL);
        });

        if (!document.getElementById('logout')) {
            $('#interactionLinks').remove();
        }

        $('#profilefilter, #close_popup').click(function () {
            $('#profilefilter, #profcont-container').remove();
        });
    return false;
    });
});
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 20 Apr 2014, 15:15

Thanks, I didn't include the RPG tab since I only wanted to include the basics. Maybe adding some settings to the script would be a good Idea, that way you can toggle the buttons you want shown. Forgot about attachments too Razz
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 21 Apr 2014, 18:44

Hello,

The script for the profile popup tabs has been updated. I will list the changes below.

► Updated the selection of userlinks (there were too many selectors anyway)
► Added the ability to enable and disable the display of tabs, avatar..
► Fixed an issue where the rank image would display over the avatar

You can find the updated code and explanations in the first post.

Many thanks for your feedback ♥
avatar
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1310
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostRanzer on Mon 21 Apr 2014, 20:52

1. While in the profile when I click a tab the details will appear in the pop-up but the highlighted tab is profile.
Spoiler:

2. Also when clicking other tabs the details doesn't change. Only the selected tab details will appear in all the tabs in the pop-up.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 21 Apr 2014, 23:09

Which browser are you using ? It is working fine on IE and Firefox.
avatar
Ranzer
New Member
Title :
Gender : Male
Posts : 4
Points : 1310
Reputation : 0
Language : English
Browser : Browser : Opera Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostRanzer on Tue 22 Apr 2014, 02:29

I'm currently using opera.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 22 Apr 2014, 16:50

I do not use opera, but I would have to look into what the problem is.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 Wed 23 Apr 2014, 01:12

Minor update :

► Updated regular expression testing
► Fixed where the popup would open while on the user profile

You can find the updated code in the first post.
avatar
lightningterror
Member
Title :
Game Developer
Gender : Unspecified
Posts : 20
Points : 1263
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postlightningterror on Wed 30 Apr 2014, 12:01

I was gonna say if it's possible to make this work on top posters , statistics and such but nvm it already does. What ya think about setting it up to work for the recent post also?

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