IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

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

None

[ 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
Gender : Male
Age : 22
Posts : 4733
Points : 9873
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me


avatar
LeePark
New Member
Gender : Unspecified
Posts : 1
Points : 1570
Reputation : 1
Language : english
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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
Gender : Male
Age : 22
Posts : 4733
Points : 9873
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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
Gender : Male
Age : 22
Posts : 4733
Points : 9873
Reputation : 2366
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

Sponsored content

PostSponsored content

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