Mouseover Profile info

mist3r0us_b0y Sun 22 Sep 2013, 11:00

how can i do this ?

Ange Tuteur Mon 23 Sep 2013, 00:31

mist3r0us_b0y Mon 23 Sep 2013, 01:28

Ange Tuteur Mon 23 Sep 2013, 20:45

mist3r0us_b0y Tue 24 Sep 2013, 06:38

HTML js Code

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>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('#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
    });

CSS code

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 {
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    background: #F1F1F1;
    border-left: 3px solid #333;
    border-top: 1px solid #333;
    box-shadow: 1px 1px 0 #CCC;
    display: block;
    float: right;
    font-weight: 400;
    margin: 2px 5px;
    padding: 5px;
    text-align: left;
    width: 350px;
    }
    .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;
    }

this is the code they are using i registered there as unleashed

Ange Tuteur Wed 25 Sep 2013, 05:34

mist3r0us_b0y Wed 25 Sep 2013, 05:54

Ange Tuteur Wed 25 Sep 2013, 23:05

mist3r0us_b0y Thu 26 Sep 2013, 02:12

omg i kiss u :*  (kidding)

you are awsomeeeeeeeeeeeeeeeeee bonita

thank you soo much for helping me

but the problem is i dont see ranke image when i mouse over it ?

Ange Tuteur Thu 26 Sep 2013, 08:14

mist3r0us_b0y Thu 26 Sep 2013, 13:52

still nothing i get a (,) ?

Ange Tuteur Thu 26 Sep 2013, 14:03

mist3r0us_b0y Thu 26 Sep 2013, 14:06

Ange Tuteur Fri 27 Sep 2013, 02:21

mist3r0us_b0y Fri 27 Sep 2013, 09:57

Ange Tuteur Fri 27 Sep 2013, 14:31

Sponsored content