The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Hovercard

View previous topic View next topic Go down

[Tutorial] Hovercard

Post by Daemon on Thu Feb 23, 2017 3:21 am

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

Image:


All you have to do is create a new JavaScript with investment on every page.
Code:
/ *
* Code: Hovercard
* Version: 1.1
* Author: Daemon
* Date: 15/10/2016
* Last Update: 26/02/2017
*/
$(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: 0;' +
'  margin-bottom: 5px;' +
'  padding: 3px;' +
'  text-align: center;' +
'}' +
'.hovercard h3 a {' +
'  font-size: 17px;' +
'  color:#666;' +
'}' +
'.hovercard h3 a:hover {color: #333;}' +
'.hover-photo {' +
'  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 content(user, url, id, photo, msg, rep, reg) {
              var contentHC =
              '<div class="hovercard_inner">' +
              '  <h3><a href="' + url + '">' + user + '</a></h3>' +
              '  <ul>' +
              '    <li><strong>Posts:</strong> ' + msg + '</li>' +
              '    <li><strong>Reputation:</strong> ' + rep + '</li>' +
              '    <li><strong>Join date:</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="Send PM">' +
              '            </a>' +
              '            &nbsp;&nbsp;' +
              '            <a href="' + url + '">' +
              '              <img src="http://hitsk.in/t/18/09/33/i_icon_profile.png" title="Visit profile">' +
              '            </a>' +
              '    </li>' +
              '  </ul>' +
              '  <img src="' + photo + '" class="hover-photo" alt>' +
              '</div>';
              $(".hovercard").html(contentHC);
        }
 
        $("a[href^='/u']").on("mouseenter", function(e) {
            if($(this).attr("href").split(/[\d,]+/)[1]) return false; // If it is user profile
            if(timeout) clearTimeout(timeout); // Clear time out
         
            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 urlUser = $(this).attr("href"), idUser = urlUser.match(/\d+/).toString();
            var stored = sessionStorage.getItem("hovercard-" + idUser);
 
            if(!stored) {
                $.get(urlUser + "?change_version=punbb", 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();
                      var 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);
                   
                      content(user, urlUser, idUser, photoUser, msg, rep, reg);
 
                });
                return false;
            }
 
            var JSONuser = $.parseJSON(stored);
            $.each(JSONuser, function(i, val) {
                  if(val.id == idUser) content(val.name, val.url, val.id, val.photo, val.message, val.reputation, val.register);
            });
        }).on("mouseleave", function(e) {
              fadeOutHovercard();
        });
 
        $(".hovercard").on("mouseenter", function(e) {
          if(timeout) clearTimeout(timeout); // Clear time out
        }).on("mouseleave", function(e) {
          fadeOutHovercard();
        });
 
});

Wink


Last edited by Daemon on Mon Feb 27, 2017 1:57 am; edited 1 time in total
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Hovercard

Post by tylercole on Thu Feb 23, 2017 3:50 am

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

Posts : 256
Reputation : 13
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

Re: [Tutorial] Hovercard

Post by SarkZKalie on Thu Feb 23, 2017 4:43 am

^in all the pages Very Happy
avatar
SarkZKalie
Forumember

Male Posts : 483
Reputation : 79
Language : English

http://rotavn.nstars.org/

Back to top Go down

Re: [Tutorial] Hovercard

Post by tylercole on Thu Feb 23, 2017 5:33 am

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

Posts : 256
Reputation : 13
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

Re: [Tutorial] Hovercard

Post by Daemon on Thu Feb 23, 2017 1:23 pm

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;' +
'}' +
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Hovercard

Post by SLGray on Thu Feb 23, 2017 5:18 pm

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 38069
Reputation : 2564
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: [Tutorial] Hovercard

Post by Daemon on Thu Feb 23, 2017 6:13 pm

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

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Hovercard

Post by SLGray on Thu Feb 23, 2017 6:20 pm

Ok.  Thanks for sharing it.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 38069
Reputation : 2564
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: [Tutorial] Hovercard

Post by tylercole on Thu Feb 23, 2017 6:22 pm

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

Posts : 256
Reputation : 13
Language : english

http://insectsandentomolgy.forumotion.com/

Back to top Go down

Re: [Tutorial] Hovercard

Post by YoshiGM on Fri Feb 24, 2017 3:18 am

Well done dude! Wink
avatar
YoshiGM
Forumember

Male Posts : 559
Reputation : 83
Language : Spanish [Native], English [69%], Italian [16%]
Location : Support Area ~

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Hovercard

Post by Daemon on Mon Feb 27, 2017 1:58 am

Updated to 1.1 Wink
avatar
Daemon
Forumember

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Hovercard

Post by Str0ng on Wed Mar 01, 2017 8:06 am

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!

Str0ng
Forumember

Posts : 55
Reputation : 7
Language : Spanish

http://www.seasonal-trackers.com

Back to top Go down

Re: [Tutorial] Hovercard

Post by Daemon on Wed Mar 01, 2017 2:15 pm

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

Posts : 27
Reputation : 11
Language : Português

Back to top Go down

Re: [Tutorial] Hovercard

Post by Str0ng on Wed Mar 01, 2017 7:13 pm

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

Str0ng
Forumember

Posts : 55
Reputation : 7
Language : Spanish

http://www.seasonal-trackers.com

Back to top Go down

View previous topic View next topic Back to top


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