Informações de usuários na página inicial
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
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
Re: Informações de usuários na página inicial
Olá autor, bom dia.
Crie um novo javascript com esse código:
Até mais.
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>' +
' ' +
' <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.
Re: Informações de usuários na página inicial
Então, troque o js por este:
Adicione esse código em sua folha de estilo css:
Até mais.
- 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.
Re: Informações de usuários na página inicial
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 ?
Veja: https://imgur.com/a/1e2z2
Editado: Está dand oerro de CSS volumoso... Está muito grande ou é a folha de estilo em si ?
Re: Informações de usuários na página inicial
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.
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.
Re: Informações de usuários na página inicial
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
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
Re: Informações de usuários na página inicial
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:
Até mais.
Crie um novo javascript com esse código:
- Código:
jQuery(document).ready(function(){
jQuery('head').append('<style>CSS</style>')});
Até mais.
Re: Informações de usuários na página inicial
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.
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.
Re: Informações de usuários na página inicial
Oshe, Vamos lá então, vou passar exatamente igual ao do fórum citado, você que arque com as responsabilidades viu...
JS:
Até mais.
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.
Re: Informações de usuários na página inicial
Não ficou tão igual mas perfeito! do jeito que queria, muito obrigado.
Uma duvida, por que arcar com as responsabilidades ? kk
Uma duvida, por que arcar com as responsabilidades ? kk
Re: Informações de usuários na página inicial
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.
Enfim, até mais.
Re: Informações de usuários na página inicial
Bom, se eu alterar algo do código para deixa-lo semelhante, da algum problema, não né ?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.
Re: Informações de usuários na página inicial
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.
Mais alguma duvida ou pode ser encerrado esse assunto?
Até mais.
Re: Informações de usuários na página inicial
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
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
Re: Informações de usuários na página inicial
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Tópicos semelhantes
» Caixa de informações na pagina inicial
» Informações sobre perfil na pag inicial
» Definir página HTML personalizada como página inicial
» Pagina html como página inicial do fórum
» Usar uma página HTML como página inicial
» Informações sobre perfil na pag inicial
» Definir página HTML personalizada como página inicial
» Pagina html como página inicial do fórum
» Usar uma página HTML como página inicial
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos