Informações do usuário no lastpos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Informações do usuário no lastpos

Mensagem por pobre louco78 em 02/05/14, 11:42 pm

  • Descrição:
queria coloca quando passa a seta do mouse em cima do nome do Usuário aparecer assim


  • Informações:
Fórum:http://ex-tibiabr.forumeiros.com/Versão:PUNBB
Tipo:Pedido de códigoTags:Informações,usuário,lastpos



Última edição por pobre louco78 em 03/05/14, 07:01 pm, editado 1 vez(es)
avatar

pobre louco78
Nível 9

Masculino
Inscrito dia : 30/04/2014
Mensagens : 154
Pontos Ativos : 242

Ver perfil do usuário http://ex-forumbr.forumeiros.com/

Resolvido Re: Informações do usuário no lastpos

Mensagem por Hancki em 03/05/14, 07:42 am

Olá!

Pode dizer-me onde viu esse efeito?

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Informações do usuário no lastpos

Mensagem por pobre louco78 em 03/05/14, 12:29 pm

Então como eu disse em todos os Tópicos eu não vi apenas achei um JS que o cara posto mais que meu fórum não funciono
avatar

pobre louco78
Nível 9

Masculino
Inscrito dia : 30/04/2014
Mensagens : 154
Pontos Ativos : 242

Ver perfil do usuário http://ex-forumbr.forumeiros.com/

Resolvido Re: Informações do usuário no lastpos

Mensagem por Hancki em 03/05/14, 02:28 pm

Use este JS investido no índice e sub-fóruns:
Código:
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>Cadastrado:</b><span></span></p> <p><b>Pontos:</b><span></span></p> <span class="linkPrf"><a href="/privmsg?mode=post&u=' + jQuery(this).attr('href').replace('/u', '') + '">Enviar MP</a></span> <span class="linkPrf"><a href="' + jQuery(this).attr('href') + '">Ver perfil</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
});
E este CSS:
Código:
.perfilInfo {
background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
float: left;
height: 14em;
left: -38em;
padding: 16px 0px 38px 5px;
top: 13px;
width: 510px;
z-index: 999;
}
.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;
bottom: -14px;
border-top:none;
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: 5px;
text-align: center;
text-decoration: none!important;
transition: all .2s ease-in-out;
width: 8em;
}
.linkPrf:hover{color: #4C4C4C;
border-color: #9A9A9A;}
.linkPrf:hover a{color: #4C4C4C;}
.linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
.setPerfil {
background: rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
padding: 5px;
padding-bottom: 10px;
border-radius: 3px;
}
.setPerfil > span {
background: #f9f9f9;
border-radius: 3px;
display: block;
height: 100%;
padding: 3px;
border: 1px solid #999;
}
.setPerfil .PerfilInfoImg {
width: 94px;
height: 160px;
float: left;
display: table;
background: #E1E1E1;
padding: 3px;
box-shadow: 1px 1px 0 #CCC;
}
.setPerfil p div{
display: inline;
}
.setPerfil h2 {
float: left;
font: bold 19px "Trebuchet MS";
display: block;
background: #E1E1E1;
width: 382px;
padding: 5px;
text-shadow: 1px 1px 0 white;
border-radius: 0 10px 0px 0;
box-shadow: 1px 1px 0 #CCC;
margin-bottom:10px;
}
.setPerfil p {
margin: 2px 5px;
float: right;
display: block;
background: #F1F1F1;
width: 350px;
text-align: left;
padding: 5px;
box-shadow: 1px 1px 0 #CCC;
font-weight: normal;
border-left: 3px solid #333;
border-top: 1px solid #333;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.setPerfil p:hover {
box-shadow: 1px 1px 0 #9A9A9A;
}

Resultado: http://prntscr.com/3ftq0a

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum