[Tutorial] Hovercard
Página 1 de 1 • Compartilhe
Autor: Daemon
Funcionalidade: Em todas as versões
Acesse:
Painel de Controle -> Modulos -> HTML & Javascripts -> Gestão dos códigos Javascripts
Crie um novo javascript com investimento em todas as paginas (ou onde você desejar o efeito) 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();
});
});
- Resultado:
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|