Profile Popup

Profile Popup · by **Leviosa** on December 2nd 2013, 11:49 am

Profile Popup

This tutorial will help you achieve a popup for users profile details upon clicking their username, this is for any forum version.

Example:

Advanced Profile

For this to work the Advanced profile must be active on your board. If you use this tutorial without the advanced profile you may experience bugs.

Administration Panel > Users & Groups > Users > Profiles
Activate advanced profile: Yes

If it is already ticked, good. If not, tick yes and save.

Installing Profile Popup

To add this feature please go to..
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > create a new script

Name: Profile Details Popup
Placement: In all the pages
Javascript code:

Code:: jQuery(function () { 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}); jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){window.open(jQuery(this).attr('href'),'_self');}); jQuery('a#profilePopup').click(function(){ var UID = jQuery(this).attr('href'); var UNM = jQuery(this).text(); 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 id="userprofile" style="max-height:400px;overflow-y:auto;"><center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center></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>'); jQuery('#userprofile').load(UID + '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details'); if (!document.getElementById('logout')){jQuery('#interactionLinks').remove();} jQuery('#profilefilter').click(function () {jQuery('#profilefilter, #profcont-container').remove();}); }); });

When you're finished adding the script save. Now when you click a users username on your forum it should display their profile details.

Using the Profile Popup

To open the pop up simply click a username on your forum, after that you should be met with the clicked users profile details. To close the popup simply click the black overlay.

The profile popup comes with more than just showing a users details, it also allows you to interact with the clicked user. At the foot of the popup are links, these links allow you to:

• View Profile
View the clicked users full profile

• Send PM
Send a private message

• Send VM
Leave a visitor message on the clicked users profile

• Add Friend
Send the user a friend request

• Add Foe
Ignore the user

Styling the Profile Popup

For those of you that like to edit the style of your stuff, I will explain a handful of the selectors and ID's you can use.

#profilefilter - This is used to style the black overlay that you see upon clicking

#profcont-container - This is the background container for the profile details, this can be used to change the background color of the popup. To override the inline style add !important to your property.

Example:

Code:: #profcont-container{ background:red !important; }

#userprofile - This is the inner container used to load the profile details, it can be edited if needed

.profileLoading - This can be used to style the loading texts

#profileLinks - This can be used to style the profile links footer

#interactionLinks - This is used to manipulate how the interaction links(PM,VM, Friends and foes) are seen. They do not display for guests

#profilePopup - The ID added to usernames to activate the profile, and grab the necessary data for the popup to work

Note: If some of your CSS properties do not take effect, add !important to override the inline styles.

Re: Profile Popup · by Ange Tuteur on July 29th 2014, 7:46 am

Profile Popup Update

Hello, it has been awhile, but I'm happy to announce an update to the popup profile. The update features some customizations, as well as fixes. You can view the example below to get an Idea of what to expect.

You will now be able to navigate the user profile by clicking the tabs. This will work on any forum version.

The CSS

Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following codes.

Code:: /* Profile popup */ #profcont-container { background:#EEE !important; border:1px solid #CCC !important; } #userAVA img{ position:absolute; top:43px; right:30px; height:50px; width:50px; } .profile_popup_nav { background:#E0E0E0; margin:-4px -4px 10px -4px; padding:3px; padding-top:10px !important; height:auto; border-bottom:1px solid #CCC; -webkit-border-radius:5px 5px 0px 0px; -moz-border-radius:5px 5px 0px 0px; border-radius:5px 5px 0px 0px; } .propop_tab { color:#888; text-shadow:1px 1px 0 #F5F5F5; 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 #CCC; border-bottom:none; -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset; -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset; box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset; background:#DDD; margin:0 2px; padding:3px; } .propop_tab:hover { position:relative; top:1px; color:#666; text-shadow:none; background-color:#EEE; } .propop_tab.activeTab { position:relative; top:1px; color:#666; text-shadow:none !important; background-color:#EEE !important; } #profileLinks { background:#E0E0E0; display:block; padding:3px; margin:10px -4px -4px -4px; border-top:1px solid #CCC; -webkit-border-radius:0px 0px 5px 5px; -moz-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; }

(This is the style of the popup you can make modifications as you wish)

The JavaScript

Go to Administration Panel > Modules > JavaScript Codes Management and create a new script. (If you have the old popup installed, edit it, and replace the contents)

Title : Profile Popup
Placement : In all the pages
Paste the code below :

Code:: $(function () { if (/\/u\d+/.test(location.pathname)) return; var wall = 1, // visitor messages tab stats = 1, // statistics tab attachments = 0, // attachments tab friends = 1, // friends tab contact = 1, // contact tab rpg = 0, // RPG tab close = 1, // close popup button avatar = 1; // display user avatar var a=document.getElementsByTagName('A'); for(i=0;i<a.length;i++)if(/\/u\d+/.test(a[i].href))a[i].className=a[i].className+' profilePopup'; $('.profilePopup:has(img)').removeClass('profilePopup'); var userWall='',userStats='',userAttachments='',userFriends='',userContact='',userRpg='',userClose='',guestView=true; if(wall==1)userWall='<span class="propop_tab" id="propop_vm">Visitor messages</span>';if(stats==1)userStats='<span class="propop_tab" id="propop_stats">Statistics</span>';if(attachments==1)userAttachments='<span class="propop_tab" id="propop_attach">Attachments</span>';if(friends==1)userFriends='<span class="propop_tab" id="propop_friends">Friends</span>';if(contact==1)userContact='<span class="propop_tab" id="propop_contact">Contact</span>';if(rpg==1)userRpg='<span class="propop_tab" id="propop_rpg">Character sheet</span>';if(close==1)userClose='<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>'; $('.profilePopup').click(function(){ var UID=$(this).attr('href'),UNM=$(this).text(),SEL='#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details',LOAD='<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Loading...</div>'; $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#EEE;border:1px solid #CCC;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;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><span id="vmLink"> • <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/,'')+'">Send VM</a></span><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> • <a href="/profile?foe='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>'); $('#userprofile').load(UID+SEL,function(){if($('#profcont-container #username').length&&_userdata.user_id==-1){$(this).html('<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Sorry, guests cannot view the profiles! :(</div>');guestView=false}}); $('#propop_profile').addClass('activeTab'); if (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'); loadPro('#propop_profile','');loadPro('#propop_vm','wall');loadPro('#propop_stats','stats');loadPro('#propop_friends','friends');loadPro('#propop_contact','contact');loadPro('#propop_rpg','rpg');loadPro('#propop_attach','attachments'); if(wall==0)$('#vmLink').remove(); if(!document.getElementById('logout'))$('#interactionLinks').remove(); $('#profilefilter,#close_popup').click(function(){$('#profilefilter, #profcont-container').remove()}); function loadPro(element, location){$(element).click(function(){if($(this).hasClass('activeTab')||guestView==false)return;$('#propop_profile,#propop_vm,#propop_stats,#propop_friends,#propop_contact,#propop_rpg,#propop_attach,#propop_close').removeClass('activeTab');$(this).addClass('activeTab');$('#userprofile').html(LOAD).load(UID+location+SEL)})} return false; }); });

Modifications

At the top of the script there are some variables which you can modify :

Code:: var wall = 1, // visitor messages tab stats = 1, // statistics tab attachments = 0, // attachments tab friends = 1, // friends tab contact = 1, // contact tab rpg = 0, // RPG tab close = 1, // close popup button avatar = 1; // display user avatar

These allow you to enable / disable tabs and extra features, like the avatar. To enable set the value to 1, to disable set the value to 0, so :

1 = ON
0 = OFF

Just save your settings and you should now have an updated popup for your Users Profiles ! Very Happy

Profile Popup

Profile Popup

Re: Profile Popup