* Mouseover Profile Info

Hi all,
How can you help with scripts to make a member card(like IPB) displayed when the mouse is over the username in forum? Etc in Board Index on latest post. I have shaw that in a forumation forum and I need the scripts(CSS/Javascript) to make it on my forum. I saw member card here

Spoiler:

Guys I have a PHPBB2 forum version is it available for my version?
Best Regards,
Dark-Avenger.

Hello Dark-Avenger,

Can you link us to the forum you've seen this on?

Here you go, http://punbb-design.forumotion.com/t7-javascript-mouseover-profile-info

Bump? Please read again the original ,message I have added details about my forum.

Best Regards,
Dark-Avenger

Follow the same steps from the tuto provided by Coolyou, but use this script for phpbb2:

Code:

jQuery(document).ready(function(){
                    jQuery('td.row3.over a[href*="/u"]').mouseover(function(){
                    jQuery(this).parents('strong').css('position', 'relative');
                    jQuery('.perfilInfo').remove();
                    jQuery(this).parents('td.row3.over').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>Points:</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('td.row1.gensmall img:first', retornoMembro).attr('src');
                    jQuery('.PerfilInfoImg').attr('src', avtPrf);
                    var perfil_rank = jQuery('td table.forumline td.row1.gensmall  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
                    });

What's the script for phpBB 3?

JAN2XONLINE wrote:What's the script for phpBB 3?

This:

Code:

jQuery(document).ready(function(){
                    jQuery('dd.lastpost a[href*="/u"]').mouseover(function(){
                    jQuery(this).parents('strong').css('position', 'relative');
                    jQuery('.perfilInfo').remove();
                    jQuery(this).parents('dd.lastpost').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>Points:</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('div#profile-advanced-right img:first', retornoMembro).attr('src');
                    jQuery('.PerfilInfoImg').attr('src', avtPrf);
                    var perfil_rank = jQuery('div#profile-advanced-right div.module 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
                    });

You'll also need this CSS to fix the text alignment:

Code:

.setPerfil > span > p > span{
display:inline-block;
}

Almost perfect. I got some problems here. As you can see here, my rank title is not in there. The box is messy too.

BEFORE EDIT:

EDIT*

I managed to fix the messy box using css. The only problem left is the rank title. Why is it not showing up?
And almost forgot, how do I change the size of the gray semi-transparent border?

Ranks retrieved can only be text however, for them to be retrieved an image needs to be present. Place this in rank titles which do not currently have an image:

Code:

http://2img.net/i/fa/empty.gif

You can change the positioning of the content box, and transparent border with this:

Code:

   .setPerfil/*Transparent box*/ {
    width:100%;
    }
    .setPerfil > span/*content box*/ {
    margin-left:5px;
    }

For the height of the mouseover content you'll edit height:177px:

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;
    }

^
Thanks! About the rank, most of us have only text rank except me which I have an icon before my rank title. I think all of my members have only automatic and special ranks without images on it.

I am not sure, but it should work properly depending on how the image is applied. I've not fully experimented with the code to find out, but applying a blank image seems to act as a hook for retrieving the rank text.

Oh, it's still not working for me even though I applied the blank image as you said.

You applied image here correct?

Damn, my bad. Now it's working. Thanks!

Welcome, I should of included that earlier, but I forgot.

It's okay.  Thanks again.

Topic Solved & Locked