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

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

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

Mensagem por iScroll em 13/03/17, 11:51 am

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:
http://i.imgur.com/NmLe8vK.png

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 13/03/17, 12:36 pm

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://hitsk.in/t/18/09/33/i_icon_pm.png" title="Enviar MP">' +
                      '            </a>' +
                      '            &nbsp;' +
                      '            <a href="' + url + '">' +
                      '              <img src="http://hitsk.in/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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 13/03/17, 01:07 pm

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por iScroll em 14/03/17, 04:30 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 06:09 pm

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 06:13 pm

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

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 06:18 pm

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 06:21 pm

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 : http://i.imgur.com/NmLe8vK.png
O senhor me passou este: http://imgur.com/a/LHpxj
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 06:31 pm

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 06:47 pm

Bom sem resultado esse JS acima.
Como eu disse:

Gostaria desse : http://i.imgur.com/NmLe8vK.png
O senhor me passou este: http://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.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 08:04 pm

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

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 08:11 pm

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 08:23 pm

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 08:27 pm

@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é ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 14/03/17, 08:34 pm

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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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

Mensagem por iScroll em 14/03/17, 08:38 pm

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 Feliz
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com

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

Mensagem por while em 15/03/17, 12:57 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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