Nimbuzzmasters forum
nwlve HI   GUEST nwlve
WELCOME TO NIMBUZZ MASTERS FORUM
PLEASE   REGISTER

TO
Dzs HAVE FULL ACCESS TO THE FORUM AND BE ABLE TO DOWNLOAD STUFF Dzs
Grp
STAY WITH US THANK YOU
Forum management ©️
Mzs

[Tutorial] Mouseover Profile Information

View previous topic View next topic Go down

avatar
balu♥krishna
Administrator
Administrator
Join date : 2013-12-04
Posts : 238
Thanks gained - : 3332
Gender : Male
Age : 29
Location Location : KERALA
View user profile http://kbzteam.forums1.net

Postbalu♥krishna on Fri Oct 09, 2015 12:32 am



File name: Mouseover Profile Information
Author: @balu krishna
Functionality: PunBB


First Go To Your

Administration Panel → Modules →Html & Javascript Management → Javascript Management
Name: Mouseover Profile Information
Placement: In homepage only

Code:
jQuery(document).ready(function(){
            jQuery('.tcr a[href*="/u"]').mouseover(function(){
            jQuery(this).parents('strong').css('position', 'relative');
            jQuery('.perfilInfo').remove();
            jQuery(this).parents('.tcr').css('overflow', 'visible');
            jQuery(this).before('
            <div class="perfilInfo" style="position:absolute;">
            <span class="setPerfil">
            <span>
            <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
            <h2>'+jQuery(this).html()+'</h2>
            <p><b>Rank:</b><span></span></p>
            <p><b>Posts:</b><span></span></p>
            <p><b>Joined:</b><span></span></p>
            <p><b>Coins:</b><span></span></p>
            <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Send PM</a></span>
            <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">View Profile</a></span>
            </span>
            </span>
            </span>
            </div>
            ');
            jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
            var avtPrf = jQuery('#profile-advanced-right img:first', retornoMembro).attr('src');
            jQuery('.PerfilInfoImg').attr('src', avtPrf);
            var perfil_rank = jQuery('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
            var perfil_post = jQuery('#field_id-6 dd', retornoMembro).html();
            var perfil_cad = jQuery('#field_id-4 dd', retornoMembro).html();
            var perfil_lastV = jQuery('#field_id-13 dd', retornoMembro).html();
            jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
            jQuery('.setPerfil p:eq(1) span').html(perfil_post);
            jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
            jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);
            });
            //get
            jQuery('.perfilInfo').mouseleave(function(){
            jQuery(this).remove();
            });//mouseleave
            });
            //mouseover
            });

After you save, go to your
Administration Panel → Display → colors → CSS
Then paste this
Code:
.perfilInfo{background:url(http://i77.servimg.com/u/f77/16/58/45/96/bottom10.png) no-repeat 98% 0;float:left;height:177px;left:-40em;padding:16px 0 38px 5px;top:13px;width:510px;z-index:999}
.setPerfil > span{background:#f9f9f9;border:1px solid #999;border-radius:3px;display:block;height:100%;padding:3px}
.sprite-icon_topic_latest{background:url(http://illiweb.com/fa/sprite_icons.png) no-repeat top left;background-position:-1083px 0;height:9px;width:11px}
.setPerfil{background:rgba(0,0,0,0.3);border-radius:3px;display:block;height:100%;padding:5px 5px 10px}
.setPerfil .PerfilInfoImg{-moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);background:#fff;border:1px solid #D5D5D5;box-shadow:0 2px 2px rgba(0,0,0,0.1);display:table;float:left;height:91px;padding:1px;width:91px}
.setPerfil h2{background:#E1E1E1;border-radius:0 10px 0 0;box-shadow:1px 1px 0 #CCC;display:block;float:left;font-family:"Trebuchet MS";font-size:19px;font-style:normal;font-variant:normal;font-weight:bold;margin-bottom:10px;padding:5px;text-shadow:1px 1px 0 #fff;width:382px}
.setPerfil p{font-weight:400;text-align:left}
.linkPrf{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F6F6F6;border:1px solid #DBDBDB;border-radius:0 0 4px 4px;border-top:none;bottom:-7px;box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);color:#616161;float:left;height:14px;left:13.8em;margin:2px;padding:2px;text-align:center;text-decoration:none!important;transition:all .2s ease-in-out;width:8em}
.linkPrf a{color:#616161!important;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;text-decoration:none}
.setPerfil p:hover{box-shadow:1px 1px 0 #9A9A9A}
.setPerfil p div{display:inline}


ηιλ⁄(вυzz λ⁄(αѕтєяs™
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]

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