[Tutorial] Mouseover Profile Information
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
Nimbuzzmasters forum

The forum of the nimbuzz forums


You are not connected. Please login or register

 
 

[Tutorial] Mouseover Profile Information

Message (Page 1 of 1)

avatar
 
Administrator
Administrator

Posted on 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;">
            <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}


Nimbuzzmasters





View user profile http://kbzteam.forums1.net


Message (Page 1 of 1)

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


  • Total Posts:
  • Total Members:
  • Newest Member:
  • Most Online: Most users ever online was 540 on Tue Jan 19, 2016 9:39 pm

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests
Users browsing this forum: None