The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

TABS in pop up profile

View previous topic View next topic Go down

Solved TABS in pop up profile

Post by IdaTR on January 23rd 2014, 9:52 am

Hey I've been looking around for a way to make tabs to the pop up profile. However I've made one myself now.. The thing I want to ask, is the urls to see the different sections IN the pop up, so the webpage doesn't go on to another place.

In other words, just like on AvacaWeb.com when you click on some ones username, and then the pop up comes, and there are some tabs at the top where you can see different kinds of information, how do I add that?

Also another thing, at the visitors messages is it possible to make a text box down under, much like quick replay?

Website: www.nionevrien.forumq.net
Version: phpbb3

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: TABS in pop up profile

Post by Ange Tuteur on January 23rd 2014, 5:02 pm

Hello,

I initially had not thought of adding tabs when making it, but it should be possible. Give the following script a test.

Code:
jQuery(function () {
  /* Add the profile popup ID to names
and return false on click */
  jQuery('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
  });
 

  /* Remove profile popup ID from avatars
  and load normally on click */
  jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){
  window.open(jQuery(this).attr('href'),'_self');
  });
 
 
  jQuery('a#profilePopup').click(function(){

  /* variables for repeat use */
  var UID = jQuery(this).attr('href');
  var UNM = jQuery(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';

  /* Append the profile popup to the body */
  jQuery('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></div><div id="userprofile" style="max-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>');

  /* Load profile when name is clicked
  this is default */
  jQuery('#userprofile').load(UID + SEL);
  jQuery('#propop_profile').addClass('activeTab');

  /* Load user profile */
  jQuery('#propop_profile').click(function() {
  jQuery(TAB).removeClass('activeTab');
  jQuery(this).addClass('activeTab');
  jQuery('#userprofile').html(LOAD).load(UID + SEL);
  });

  /* Load user wall */
  jQuery('#propop_vm').click(function() {
  jQuery(TAB).removeClass('activeTab');
  jQuery(this).addClass('activeTab');
  jQuery('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
  });

  /* Load user stats */
  jQuery('#propop_stats').click(function() {
  jQuery(TAB).removeClass('activeTab');
  jQuery(this).addClass('activeTab');
  jQuery('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
  });

  /* Load user friends */
  jQuery('#propop_friends').click(function() {
  jQuery(TAB).removeClass('activeTab');
  jQuery(this).addClass('activeTab');
  jQuery('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
  });

  /* Load user contact */
  jQuery('#propop_contact').click(function() {
  jQuery(TAB).removeClass('activeTab');
  jQuery(this).addClass('activeTab');
  jQuery('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
  });

  /* If the user is logged out
  remove the interaction links */
  if (!document.getElementById('logout')) {
  jQuery('#interactionLinks').remove();
  }

  /* When the user clicks the filter
  it will close the profile popup */
  jQuery('#profilefilter').click(function () {
  jQuery('#profilefilter, #profcont-container').remove();
  });
  });
});

And CSS for the tabs :
Code:
/* Profile details popup */
.profile_popup_nav {
margin:3px -4px 10px -4px;
padding:3px;
height:16px;
border-bottom:1px solid #AAA;
}
.propop_tab {
cursor:pointer;
border-radius:4px 4px 0px 0px;
border:1px solid #AAA;
border-bottom:none;
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;
}

For your second, I do not believe that is possible.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: TABS in pop up profile

Post by IdaTR on January 23rd 2014, 10:53 pm

Solved (: and thx! looks awesome!
aah wait a minute, can't get the avatar to show up now -.-

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: TABS in pop up profile

Post by Ange Tuteur on January 23rd 2014, 11:18 pm

It would have to be added into the script, here :
Code:
jQuery(function () {
        /* Add the profile popup ID to names
      and return false on click */
        jQuery('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
        });
       

        /* Remove profile popup ID from avatars
        and load normally on click */
        jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){
            window.open(jQuery(this).attr('href'),'_self');
        });
       
       
        jQuery('a#profilePopup').click(function(){

            /* variables for repeat use */
            var UID = jQuery(this).attr('href');
            var UNM = jQuery(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';

            /* Append the profile popup to the body */
            jQuery('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></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>');

            /* Load profile when name is clicked
            this is default */
            jQuery('#userprofile').load(UID + SEL);
            jQuery('#userAVA').load(UID + '#profile-advanced-right .module .inner div img:eq(0)');
            jQuery('#propop_profile').addClass('activeTab');

            /* Load user profile */
            jQuery('#propop_profile').click(function() {
                jQuery(TAB).removeClass('activeTab');
                jQuery(this).addClass('activeTab');
                jQuery('#userprofile').html(LOAD).load(UID + SEL);
            });

            /* Load user wall */
            jQuery('#propop_vm').click(function() {
                jQuery(TAB).removeClass('activeTab');
                jQuery(this).addClass('activeTab');
                jQuery('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
            });

            /* Load user stats */
            jQuery('#propop_stats').click(function() {
                jQuery(TAB).removeClass('activeTab');
                jQuery(this).addClass('activeTab');
                jQuery('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
            });

            /* Load user friends */
            jQuery('#propop_friends').click(function() {
                jQuery(TAB).removeClass('activeTab');
                jQuery(this).addClass('activeTab');
                jQuery('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
            });

            /* Load user contact */
            jQuery('#propop_contact').click(function() {
                jQuery(TAB).removeClass('activeTab');
                jQuery(this).addClass('activeTab');
                jQuery('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
            });

            /* If the user is logged out
            remove the interaction links */
            if (!document.getElementById('logout')) {
                jQuery('#interactionLinks').remove();
            }

            /* When the user clicks the filter
            it will close the profile popup */
            jQuery('#profilefilter').click(function () {
                jQuery('#profilefilter, #profcont-container').remove();
            });
        });
    });

Then add the CSS for it :
Code:
#userAVA img{
position:absolute;
right:30px;
height:50px;
width:50px;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: TABS in pop up profile

Post by IdaTR on January 24th 2014, 9:25 am

Perfect! Thanks again Very Happy

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: TABS in pop up profile

Post by SLGray on January 24th 2014, 9:28 am

Solved?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: TABS in pop up profile

Post by IdaTR on January 24th 2014, 9:30 am

YUP! Its solved !

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: TABS in pop up profile

Post by SLGray on January 24th 2014, 9:31 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum