The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

[Tutorial] Hovercard

+3
SarkZKalie
tylercole
Daemon
7 posters

Go down

[Tutorial] Hovercard Empty [Tutorial] Hovercard

Post by Daemon Thu 23 Feb 2017 - 4:21

This code allows a hovercard to appear with user information by hovering over the nickname.

Image:
[Tutorial] Hovercard Sem_ty11

All you have to do is create a new JavaScript (The placement: All pages).
Code:
/*
 *  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: "Loading...",
        sendPm: "Send PM",
        profile: "Profile",
        posts: "Posts",
        reputation: "Reputation",
        join: "Join Date",
        findContent: "Find Content",
        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()
})();

Wink


Last edited by Daemon on Sat 16 Jun 2018 - 17:29; edited 13 times in total
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

yonev likes this post

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by tylercole Thu 23 Feb 2017 - 4:50

Cool, but what do u mean by, "With an investment on every page?"
tylercole
tylercole
Forumember

Posts : 304
Reputation : 17
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by SarkZKalie Thu 23 Feb 2017 - 5:43

^in all the pages Very Happy
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by tylercole Thu 23 Feb 2017 - 6:33

That's cool, any idea how to make the headers of these hover cards a certain color?
tylercole
tylercole
Forumember

Posts : 304
Reputation : 17
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Thu 23 Feb 2017 - 14:23

You can change the header color in the following part (#eee).
Code:
'.hovercard h3 {' +
'  background-color: #eee;' +
'  border-bottom: 1px dashed #aaa;' +
'  margin: 0;' +
'  margin-bottom: 5px;' +
'  padding: 3px;' +
'  text-align: center;' +
'}' +
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by SLGray Thu 23 Feb 2017 - 18:18

Is this a modified version of the pop up feature that we already have?


[Tutorial] Hovercard Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Thu 23 Feb 2017 - 19:13

The default popup applies to the marked names, with the @, correct?
This code I made, applies to any nickname that has a user link. Just mouse over.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by SLGray Thu 23 Feb 2017 - 19:20

Ok.  Thanks for sharing it.


[Tutorial] Hovercard Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by tylercole Thu 23 Feb 2017 - 19:22

Yeah, super cool. Just added it to my forum. Appreciate it.
tylercole
tylercole
Forumember

Posts : 304
Reputation : 17
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by YoshiGM Fri 24 Feb 2017 - 4:18

Well done dude! Wink
YoshiGM
YoshiGM
Active Poster

Male Posts : 1488
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Mon 27 Feb 2017 - 2:58

Updated to 1.1 Wink
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Str0ng Wed 1 Mar 2017 - 9:06

Awesome! But if you change the value on the profile of the user.. it does not update in the pop up until you have closed (entirely) and have reset the browser. Is possible to change it? And do it update after x amount of minutes or something?

TY!
avatar
Str0ng
Forumember

Posts : 55
Reputation : 7
Language : Spanish

http://www.seasonal-trackers.com

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Wed 1 Mar 2017 - 15:15

I did this in order to avoid having a large number of requests, saving the content with sessionStorage to avoid loading multiple times.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Str0ng Wed 1 Mar 2017 - 20:13

I see.. and why not, store them in the forum cookies? Instead on the browser? So to see the updated content only will be needed to clean the forum cookies (and not need to close all the tabs of the browser etc..)
avatar
Str0ng
Forumember

Posts : 55
Reputation : 7
Language : Spanish

http://www.seasonal-trackers.com

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by jackauk Mon 30 Oct 2017 - 18:04

Hello,
I get trouble that when I move cursor over nickname in near right bound of window, the panel dont show full detail.
jackauk
jackauk
New Member

Posts : 2
Reputation : 2
Language : English, Vietnamese

http://openlab.forumvi.com

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Fri 13 Apr 2018 - 7:08

Updated!
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Tue 24 Apr 2018 - 7:19

**Version: 1.324042018**
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by SarkZKalie Tue 24 Apr 2018 - 12:44

Any changelog please. Thank you Very Happy And if possible, could you provide the old versions before? I think we can learn more from you. Cuz knowledge is power hehe


[Tutorial] Hovercard Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

[Tutorial] Hovercard Empty Re: [Tutorial] Hovercard

Post by Daemon Wed 25 Apr 2018 - 1:21

SarkZKalie wrote:Any changelog please. Thank you Very Happy And if possible, could you provide the old versions before? I think we can learn more from you. Cuz knowledge is power hehe
I did not save on github :/
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum