Recent Tutorials
Who is online?
In total there are 6 users online :: 2 Registered, 0 Hidden and 4 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 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 : 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

First topic message reminder :

* 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
LeePark
New Member
Title :
Gender : Unspecified
Posts : 1
Points : 1241
Reputation : 1
Language : english
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://speedup.fanbb.net/

PostLeePark on Wed 30 Apr 2014, 21:41

woah~! its great!!!! working on my forums ^^
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 01 May 2014, 01:08

@lightningterror wrote: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?
It works for recent topics if scrolling is set to 'no'. When they're in scrolling it seems to load those topics/usernames AFTER the script has already ran. This means that the ID distributed to the usernames is missed for the scrolling recent topics. I could probably come up with a solution which binds an event, of course I'll have to ditch the ID and work with the regexp instead.

Thanks for reminding me of that. Wink

@LeePark wrote:woah~! its great!!!! working on my forums ^^
Glad you like ^^
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 25 Aug 2014, 00:43

You can now install this updated feature from here : http://help.forumotion.com/t128644-profile-popup#905809

=> Sent to archives

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