Editar Hovercard

Detalhes da questão

Endereço do fórum: https://testandoforumeiros.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Opa, olá a todos

queria pedir um perfil hover, igual ao hover de grupos

Quando passa o mouse aparece uma prévia do perfil

Queria fazer isso:
http://prntscr.com/m5y2s9

mas com modificações, queria que aparecesse quando passasse o mouse por cima de todo nick que tivesse, sem precisar de citação ou @username

Desse uma "csszada" nisso aí

https://i.imgur.com/8SoLbPp.png

algo parecido com isso

Deixasse o Cadastro, Mensagens e o Humor trocasse pelo Grupo que faz parte, colocasse uma caixa meio arredondada com o fundo de acordo com as cores do grupo, se o grupo for raimbow o fundo ser raimbow e o mesmo font-awesome, se o grupo for só preto, etc...
E onde tem "1800" colocar "online/offline" verde para on, vermelho para off

Olá @sucodemaracaju,

Crie uma nova Página JavaScript com investimento em todas as páginas, com o seguinte código:

Código:

/*
 *  Application: Hovercard
 *  Date: 04/06/2018
 *  Version: 2.004062018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
(function() {
    hovercard = {
        initialize: function() {
            $(function() {
                hovercard.setupHovercard();
            });
        },
        loading: "Carregado...",
        sendPm: "Mandar MP",
        profile: "Perfil",
        posts: "Mensagens",
        reputation: "Reputação",
        join: "Registro",
        findContent: "Ver conteúdo",
        pmImg: "https://i62.servimg.com/u/f62/18/12/37/46/mail0210.png",
        profileImg: "https://i62.servimg.com/u/f62/18/12/37/46/user-111.png",
        findImg: "https://i62.servimg.com/u/f62/18/12/37/46/search10.png",
        hovercard: $("<div>", {
            class: "hovercard"
        }),
        myCSS: '<style type="text/css">' +
            '.hovercard {' +
            '  display: none;' +
            '  position: absolute;' +
            '  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;' +
            '  margin-top: 8px;' +
            '  word-wrap: break-word;' +
            '  color: #555;' +
            '  font-size: 13px;' +
            '  padding: 4px;' +
            '  border-radius: 4px;' +
            '  -webkit-border-radius: 4px;' +
            '  -moz-border-radius: 4px;' +
            '  text-decoration: none' +
            '  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 ul {' +
            '  margin-left: 100px;' +
            '  list-style: none;' +
            '  display: table;' +
            '  table-layout: auto;' +
            '  border-collapse: separate;' +
            '  border-spacing: 0;' +
            '}' +
            '.hovercard ul, .hovercard .hovercard-field {position: relative;}' +
            '.hovercard li {padding: 2px 0;}' +
            '.hovercard .hovercard-field {width: 100px;}' +
            '.hovercard .hovercard-field, .hovercard .hovercard-value {display: table-cell;}' +
            '.hovercard:before {' +
            '  width: 0;' +
            '  pointer-events: none;' +
            '  left: 0;' +
            '  right: 0;' +
            '  margin-left: auto;' +
            '  margin-right: auto;' +
            '  content: "";' +
            '  position: absolute;' +
            '  pointer-events: none !important;' +
            '  bottom: 100%;' +
            '  border-width: 10px;' +
            '  border-style: solid;' +
            '  border-color: transparent transparent #fff transparent;' +
            '}' +
            '.hovercard h3 {' +
            '  background-color: #353c41;' +
            '  border-radius: 4px 4px 0 0;' +
            '  -webkit-border-radius: 4px 4px 0 0;' +
            '  -moz-border-radius: 4px 4px 0 0;' +
            '  margin-bottom: 5px;' +
            '  padding: 13px;' +
            '  text-align: center;' +
            '}' +
            '.hovercard h3 a {' +
            '  font-size: 17px;' +
            '  text-decoration: none;' +
            '  color:#fff;' +
            '}' +
            '.hovercard h3 a:hover {color: #479fcf;}' +
            '.hovercard .hover-photo {' +
            '  width: 68px;' +
            '  height: 68px;' +
            '  background-color: #FFFFFF;' +
            '  border: 1px solid #aaa;' +
            '  border-radius: 150px;' +
            '  -webkit-border-radius: 150px;' +
            '  -moz-border-radius: 150px;' +
            '  -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;' +
            '  float: left;' +
            '  padding: 2px;' +
            '}' +
            '.hovercard .hovercard-footer {' +
            '  background-color: #ddd;' +
            '  border-radius: 0 0 4px 4px;' +
            '  -webkit-border-radius: 0 0 4px 4px;' +
            '  -moz-border-radius: 0 0 4px 4px;' +
            '  margin-top: 5px;' +
            '  padding: 13px;' +
            '  text-align: right;' +
            '}' +
            '.hovercard .hovercard-button {' +
            '  background-color: #EEEEEE;' +
            '  background-image: linear-gradient(#F5F6F6, #E4E4E3);' +
            '  border-color: #999999 #999999 #888888;' +
            '  border-style: solid;' +
            '  border-width: 1px;' +
            '  color: #555;' +
            '  text-decoration: none;' +
            '  margin: 5px;' +
            '  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;' +
            '  font: bold 11px tahoma, verdana, arial, sans-serif;' +
            '  padding: 5px 6px 5px 8px;' +
            '  text-align: center;' +
            '}' +
            '.hovercard .hovercard-button:hover {color: #444;border-color: #888888 #888888 #777777;}' +
            '.hovercard .hovercard-button img {vertical-align: bottom;}' +
            '</style>',
        hovercardWidth: 280, // Set hovercard width (px)
        openingInterval: 400, // 0.4 seconds to open the hovercard
        closingInterval: 400, // 0.4 seconds to close the hovercard
        content: function(user, url, id, photo, msg, rep, reg) {
            hovercard.hovercard.html(
                '<div class="hovercard-inner">' +
                '    <h3>' +
                '        <img src="' + photo + '" class="hover-photo" alt>' +
                '        <a href="/profile?mode=viewprofile&u=' + user + '">' + user + '</a>' +
                '    </h3>' +
                '    <ul>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.posts + '</strong></span>' +
                '            <span class="hovercard-value">' + msg + '</span>' +
                '        </li>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.reputation + '</strong></span>' +
                '            <span class="hovercard-value">' + rep + '</span>' +
                '        </li>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.join + '</strong></span>' +
                '            <span class="hovercard-value">' + reg + '</span>' +
                '        </li>' +
                '    </ul>' +
                '</div>' +
                '<div class="hovercard-footer">' +
                '    <a href="/privmsg?mode=post&u=' + id + '" class="hovercard-button" title="' + hovercard.sendPm + '">' +
                '        <img src="' + hovercard.pmImg + '">' +
                '    </a>' +
                '    <a href="/profile?mode=viewprofile&u=' + user + '" class="hovercard-button" title="' + hovercard.profile + '">' +
                '        <img src="' + hovercard.profileImg + '">' +
                '    </a>' +
                '    <a href="/spa/' + user + '" class="hovercard-button" title="' + hovercard.findContent + '">' +
                '        <img src="' + hovercard.findImg + '">' +
                '    </a>' +
                '</div>'
            );
        },
        fadeOutHovercard: function() {
            timeout = setTimeout(function() {
                hovercard.hovercard.fadeOut(hovercard.closingInterval, function() {
                    $(this).html(hovercard.loading);
                });
            }, 1500);
        },
        setupHovercard: function() {
            // Inserting CSS before page body
            $(hovercard.myCSS).insertBefore("body");
            // Inserting element hovercard append to page body
            $(hovercard.hovercard).appendTo("body");
            // Set hovercard width
            $(hovercard.hovercard).width(hovercard.hovercardWidth);
 
            var timeout,
                JSONuser = [];
 
            $(document).on("mouseenter", "a[href^='/u']", function(e) {
                if ($(this).attr("href").split(/[\d,]+/)[1]) return; // If it is user profile
                if (timeout) clearTimeout(timeout); // Clear time out
                // Hovercard position
                var pos = {
                    "top": $(this).offset().top + $(this).outerHeight(),
                    "left": $(this).offset().left - (hovercard.hovercard.width() / 2) + ($(this).outerWidth() / 2)
                };
                // Positioning and displaying hovercard
                hovercard.hovercard.html(hovercard.loading).css(pos).fadeIn(hovercard.openingInterval);
 
                var urlUser = $(this).attr("href"),
                    idUser = urlUser.match(/\d+/).toString(),
                    stored = sessionStorage.getItem("hovercard-" + idUser);
 
                if (!stored) {
                    $.ajax({
                        type: "GET",
                        url: urlUser + "?change_version=punbb",
                        success: function(data) {
                            var user = $(data).filter("title").text().split("- ")[1],
                                photoUser = $("#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();
                            JSONuser = [{
                                name: user,
                                url: urlUser,
                                photo: photoUser,
                                id: idUser,
                                message: msg,
                                reputation: rep,
                                register: reg
                            }];
                            var dataAsJsonString = JSON.stringify(JSONuser);
                            sessionStorage.setItem("hovercard-" + idUser, dataAsJsonString);
                            hovercard.content(user, urlUser, idUser, photoUser, msg, rep, reg);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 500) {
                                console.log("Internal error: " + jqXHR.responseText);
                            } else {
                                console.log("Unexpected error.");
                            }
                        }
                    });
                    return;
                }
 
                JSONuser = $.parseJSON(stored);
                $.each(JSONuser, function(i, val) {
                    if (val.id == idUser) hovercard.content(val.name, val.url, val.id, val.photo, val.message, val.reputation, val.register);
                });
            }).on("mouseleave", function(e) {
                hovercard.fadeOutHovercard();
            });
 
            hovercard.hovercard.on("mouseenter", function(e) {
                if (timeout) clearTimeout(timeout); // Clear time out
            }).on("mouseleave", function(e) {
                hovercard.fadeOutHovercard();
            });
        }
    };
    hovercard.initialize()
})();

Atenciosamente,
pedxz.

Opa, pedxz
Eu já tinha testado esse, e deu certo sim!

A questão agora é deixar do jeito que pedi

Editar ele, tem como?

sucodemaracaju escreveu:Opa, pedxz
Eu já tinha testado esse, e deu certo sim!

A questão agora é deixar do jeito que pedi

Editar ele, tem como?

Infelizmente seria muito trabalhoso, então não tem como adicionar os campos pedidos, desculpe!

Imagino, cara! Eu agradeço demais, cê é o cara kkk

eu respondi a outra questão, lá

se possível, da uma averiguada aí

Pode fechar, brigadão <3