[Tutorial] Mouseover Profile Information

Administrator

Join date : 2013-12-04

Posts : 238

Thanks gained - : 3332

Gender :

Age : 35

Location : KERALA

Posted Fri Oct 09, 2015 12:32 am

POPULAR

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;"> <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" /> <h2>'+jQuery(this).html()+'</h2> Rank: Posts: Joined: Coins: <a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Send PM</a> <a href="'+jQuery(this).attr('href')+'">View Profile</a> </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://2img.net/i/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}

Sign In

[Tutorial] Mouseover Profile Information

balu♥krishna