Informações de usuários na página inicial

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.forumeiros.com/forum
Versão do fórum: phpBB2

Descrição

Olá pessoal, gostaria desse JS se possível:
https://i.imgur.com/NmLe8vK.png

Fórum onde vi: http://antenadogames.forumeiros.com

Olá autor, bom dia.

Crie um novo javascript com esse código:

Código:

/ *
* Código: Hovercard
* Versão: 1.0
* Autor: Daemon
* Data: 15/10/2016
*/
$(document).ready(function(e) {
$("head").append(
'<style type="text/css">' +
'.hovercard {' +
'  display: none;' +
'  position: absolute;' +
'  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;' +
'  margin-top: 8px;' +
'  margin-left: -15px;' +
'  word-wrap: break-word;' +
'  border:1px solid #aaa;' +
'  color: #555;' +
'  font-size: 12px;' +
'  border-radius: 3px;' +
'  z-index: 50;' +
'  background-color: #fff;' +
'  -webkit-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
'  -moz-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
'  box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
'}' +
'.hovercard_inner {' +
'  height: 145px;' +
'  width: 230px;' +
'}' +
'.hovercard ul {' +
'  margin-right: 5px;' +
'  list-style: none;' +
'  float: right;' +
'}' +
'.hovercard li {padding: 3px 2px;border-bottom: 1px solid #ccc;}' +
'.hovercard li:last-child {border-bottom: 0;}' +
'.hovercard:before {' +
'  content: "";' +
'  position: absolute;' +
'  pointer-events: none !important;' +
'  bottom: 100%;' +
'  border-width: 10px;' +
'  opacity: 0.4;' +
'  border-style: solid;' +
'  border-color: transparent transparent #000 transparent;' +
'}' +
'.hovercard h3 {' +
'  background-color: #eee;' +
'  border-bottom: 1px dashed #aaa;' +
'  margin-bottom: 5px;' +
'  padding: 3px;' +
'  text-align: center;' +
'}' +
'.hovercard h3 a {' +
'  font-size: 17px;' +
'  color:#666;' +
'}' +
'.hovercard h3 a:hover {color: #333;}' +
'.hover-foto {' +
'  width: 55px;' +
'  height: 55px;' +
'  background-color: #FFFFFF;' +
'  border: 1px solid #aaa;' +
'  -webkit-box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
'  -moz-box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
'  box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
'  margin: 10px;' +
'  padding: 2px;' +
'  -webkit-border-radius: 100%;' +
'  -moz-border-radius: 100%;' +
'  border-radius: 100%;' +
'}' +
'.hovercard a {' +
'  text-decoration: none;' +
'  cursor: pointer;' +
'}' +
'</style>'
);
$("body").append('<div class="hovercard" style="display:none"></div>');

        var timeout;
     
        function fadeOutHovercard() {
              timeout = setTimeout(function() {
                      $(".hovercard").fadeOut(400, function() {
                          $(this).html("<img src='http://imgur.com/qgD1gdO.gif' alt>");
                      });
              }, 1500);
        }
       
        function conteudo(user, url, id, foto, msg, rep, reg) {
                      var conteudoHC =
                      '<div class="hovercard_inner">' +
                      '  <h3><a href="' + url + '">' + user + '</a></h3>' +
                      '  <ul>' +
                      '    <li><strong>Mensagens:</strong> ' + msg + '</li>' +
                      '    <li><strong>Reputação:</strong> ' + rep + '</li>' +
                      '    <li><strong>Registro:</strong> ' + reg + '</li>' +
                      '    <li>' +
                      '            <a href="/privmsg?mode=post&u=' + id + '">' +
                      '              <img src="https://2img.net/s/t/18/09/33/i_icon_pm.png" title="Enviar MP">' +
                      '            </a>' +
                      '            &nbsp;' +
                      '            <a href="' + url + '">' +
                      '              <img src="http://2img.net/s/t/18/09/33/i_icon_profile.png" title="Visitar o perfil">' +
                      '            </a>' +
                      '    </li>' +
                      '  </ul>' +
                      '  <img src="' + foto + '" class="hover-foto" alt>' +
                      '</div>';
                      $(".hovercard").html(conteudoHC);
        }

        $("a[href^='/u']").mouseenter(function(e) {
            if(timeout) {clearTimeout(timeout);}

            var pos = {
                        top: e.pageY+ "px",
                        left: e.pageX + "px"
            };

            $(".hovercard").html("<img src='http://imgur.com/qgD1gdO.gif' alt>").css(pos).fadeIn(400);

            var user = $(this).text(), urlUser = $(this).attr("href"), idUser = urlUser.match(/[0-9 -()+]+$/);

            var stored = sessionStorage.getItem("hovercard-" + urlUser);

            if(!stored) {
                $.get(urlUser, function(data) {
                      var fotoUser = $("#profile-advanced-right .module:first .main-content img", data).attr("src"), msg = $("#field_id-6 dd", data).text(), rep = $("#field_id-14 dd", data).text(), reg = $("#field_id-4 dd", data).text();
                      var JSONuser = [{nome: user, url: urlUser, foto: fotoUser, id: idUser, mensagem: msg, reputacao: rep, registro: reg}];
                      var dataAsJsonString = JSON.stringify(JSONuser);
                      sessionStorage.setItem("hovercard-" + urlUser, dataAsJsonString);
                     
                      conteudo(user, urlUser, idUser, fotoUser, msg, rep, reg);

                });
                return false;
            }
            var JSONuser = $.parseJSON(stored);
            $.each(JSONuser, function(i, val) {
                  if(val.nome == user) conteudo(val.nome, val.url, val.id, val.foto, val.mensagem, val.reputacao, val.registro);
            });
        }).mouseleave(function(e) {
              fadeOutHovercard();
        });


        $(".hovercard").mouseenter(function(e) {
          if(timeout) {clearTimeout(timeout);}
        }).mouseleave(function(e) {
          fadeOutHovercard();
        });

});

Até mais.

Resultou mas não do mesmo jeito da imagem acima.
Veja:
https://i.imgur.com/HjNPkm5.png

UP

Então, troque o js por este:

Código:

jQuery(document).ready(function() {
    $('.tcr a[href*="/u"]').mouseover(function() {
        $(this).parents('strong').css('position', 'relative');
        $('.cp_geral').remove();
        $(this).parents('.tcr').css('overflow', 'visible');
        $(this).before('<style>@import url("https://googledrive.com/host/0B3OkiMRv7LXpRTRTS01mLXJVRXc#icones-elegantes-Cepheus.css");</style><a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputação</span></div> <div class="cp_info-botoes-data"><strong></strong><span>cadastro</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">MP</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PERFIL</a></div> </div></div> </div></a>');
        $.get($(this).attr('href'), function(cps) {
            $('.span_capa-nick').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
            $('.cp_capa-avatar').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
            $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
            $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
            $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());

        });

        $('.cp_geral').mouseleave(function() {
            $(this).remove();
        });



    });
});

Adicione esse código em sua folha de estilo css:

Código:

.cp_geral { width:340px; padding-top:50px; transition:all 150ms linear; } .cp_box { width:340px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); -moz-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); left:-120px; top:-13px; background:#fff; z-index:999; position:absolute; transition:all 150ms linear; margin:50px; } .cp_capa { background:#263340 url(http://i.imgur.com/6AnKAdN.png) right no-repeat; height:105px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px; padding:5px 5px 0; } .cp_capa:before { content:""; display:inline-block; vertical-align:middle; margin-left:74px; width:0; height:0; position:absolute; top:-15px; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #263340; } .cp_capa-avatar { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; border:1px solid #d8d8d8; height:75px; width:75px; text-align:center; float:left; font-size:0; padding:7px; } .cp_capa-avatar img { -moz-border-radius:100%; -webkit-border-radius:100%; border:0 solid #d8d8d8; border-radius:100%; height:75px; width:75px; }.cp_capa-avatar img:nth-of-type(2){display:none} .cp_capa-nick { width:215px; height:75px; float:left; padding:25px 0 0 15px; } .cp_capa-nick strong { color:#fff!important; font-size:25px; font-weight:400!important; display:block; } .cp_info { text-align:center; padding:10px; } .cp_info-botoes { height:60px; width:320px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-decoration:none; } .cp_info-botoes a { text-decoration:none; } .cp_info-botoes-post { background:#ecf0f1; width:85px; height:53px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-rep { background:#6bbd21; width:110px; height:53px; text-transform:uppercase; border-bottom:7px solid #68a72f; float:left; } .cp_info-botoes-rep strong { padding-top:8px; color:#fff; display:block; font-size:20px; } .cp_info-botoes-rep span { color:#fff; font-size:12px; } .cp_info-botoes-data strong { padding-top:8px; color:#666; display:block; font-size:15px; } .cp_info-botoes-data { background:#ecf0f1; width:125px; height:53px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomright:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-post,.cp_info-botoes-rep,.cp_info-botoes-data { transition:all 150ms linear; } .cp_info-botoes-post:hover,.cp_info-botoes-rep:hover,.cp_info-botoes-data:hover { opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); } .cp_icones { background:#ecf0f1; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; color:#bec3c7; height:20px; padding:5px; } .cp_icones a { font-size:12px; text-decoration:none; color:#666; } .cp_mp,.cp_perfil { float:left; padding-left:10px; transition:all 150ms linear; } .cp_mp:hover { float:left; padding-left:10px; color:#c1392b; } .cp_mp:before { content:"\f003"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:before { content:"\f007"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:hover { padding-left:10px; color:#6bbd21; } .cp_mais { width:100%; } .cp_capa-avatar br,.span_capa-nick img,.span_capa-nick br { display:none; } .cp_capa-nick span,.span_capa-nick { color:#fff!important; font-size:12px; line-height:22px; font-weight:400!important; float:none!important} .cp_info-botoes-post strong { padding-top:8px; color:#666; display:block; font-size:20px; } .cp_info-botoes-post span,.cp_info-botoes-data span { color:#868585; font-size:11px; }

Até mais.

Eita! Bugou tudo kkkkkkkkkkkkk
Veja: https://imgur.com/a/1e2z2

Editado: Está dand oerro de CSS volumoso... Está muito grande ou é a folha de estilo em si ?

Você só criou o JS, e não coloco o CSS, foi isto que aconteceu amigo.

Refaça o que eu pedi no tópico acima. Quanto ao css de fazer o efeito: "Não há mensagens" infelizmente não há o que fazer, ele irá duplicar sempre que passar o mouse por cima :/

Até mais.

Eu acabei editando...
O CSS está volumoso, algo que possa fazer?

Editado: 

Outra coisa, o código pelo que vi não é o que eu queria...
Gostaria desse : https://i.imgur.com/NmLe8vK.png
O senhor me passou este: https://imgur.com/a/LHpxj

A folha de estilo css tem a capacidade de 15 mil caracteres se você ultrapassou esse volume, que é o provável pois o sistema nunca mente, mas tem uma solução para isto... faça o seguinte:

Crie um novo javascript com esse código:

Código:

jQuery(document).ready(function(){
jQuery('head').append('<style>CSS</style>')});

Até mais.

Bom sem resultado esse JS acima.
Como eu disse:

Gostaria desse : https://i.imgur.com/NmLe8vK.png
O senhor me passou este: https://imgur.com/a/LHpxj

Acho que poderiamos parar de investir nesse code acima e investir nesse mesmo que eu pedi visto que é diferente.
Tem algum problema pro senhor? Desculpe qualquer erro meu.

Oshe, Vamos lá então, vou passar exatamente igual ao do fórum citado, você que arque com as responsabilidades viu...

JS:

Código:

$(function(){var links=$('a[href^="/u"]').filter(function(){if(this.firstChild&&this.firstChild.tagName){if(this.firstChild.tagName!='IMG'){return this}}else{return this}}),usersinfo={};links.tooltipster&&links.not('.mentiontag, .tooltipstered').filter(function(){if(!$(this).closest('#tabs')[0]){return this}}).tooltipster({animation:'fade',interactive:true,contentAsHTML:true,minWidth:300,maxWidth:300,delay:500,arrowColor:"#EEE",autoClose:true,content:'Carregando...',functionBefore:function(origin,continueTooltip){continueTooltip();var userid=$(this).attr('href').replace(/.*?\/u(\d+).*/,'$1');if(origin.data('ajax')!=='cached'){if(usersinfo[userid]!=undefined){origin.tooltipster('content',usersinfo[userid]).data('ajax','cached')}else{$.ajax({type:'GET',url:"/ajax/index.php",dataType:"html",data:{f:"m",user_id:userid},success:function(html){usersinfo[userid]=html;origin.tooltipster('content',html).data('ajax','cached')}})}}}})});

Até mais.

Não ficou tão igual mas perfeito! do jeito que queria, muito obrigado.
Uma duvida, por que arcar com as responsabilidades ? kk

Por que não sei de onde foi tirado o código, se por acaso denunciarem o seu fórum por conter um código privado, não sei se é privado e se tem copyright, pode ser excluido o fórum ou dá em casos jurídicos.

Enfim, até mais.

while escreveu:Por que não sei de onde foi tirado o código, se por acaso denunciarem o seu fórum por conter um código privado, não sei se é privado e se tem copyright, pode ser excluido o fórum ou dá em casos jurídicos.

Enfim, até mais.

Bom, se eu alterar algo do código para deixa-lo semelhante, da algum problema, não né ?

Acredito que não, mas, olhando bem, você nem precisa alterar pois foi o código foi feito pelo próprio sistema da Forumeiros, me refiro ao que é o mesmo utilizado na marcação de membro no tópico. Deve ter sido feito algum tutorial em algum site gringo que tem afiliação á Forumeiros, então nem se preocupe.

Mais alguma duvida ou pode ser encerrado esse assunto?
Até mais.

Não não, agradeço demais while.
Uma hora gostaria de aprender contigo, aprendi uma coisa ou outra sozinho mas gostaria de ter mais conhecimento, se tiver disponível ficaria muito agradecido.

Podem fechar