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.

Drop-down menu when hovering on profile picture

View previous topic View next topic Go down

Solved Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 8:45 am

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem : https://i.gyazo.com/a349791fcc69e7cbc3db59b7b0394424.png
Who the problem concerns : All members
Forum link : http://www.revivaldawn-oprp.com/

Description of problem

I'd like to create a Javascript which allows users to hover over their profile picture to see a certain field from within their profile. (Sort of like in a drop-down menu, except the pop-up appears upon hovering). The field in question is as shown above. The profile field's number is 27, as I imagine that'll be necessary to select that specific user data.

Profile Field I'm referring to will have a single url as its content.


Note that I'm a complete novice when it comes to Javascript, so have no fear of insulting my intelligence. XD

And any additional instructions on how I could further decorate this drop-down menu would be very helpful also! (i.e. Relevant CSS selectors and such.)


Last edited by Gray on November 20th 2017, 3:11 am; edited 1 time in total

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by SLGray on November 17th 2017, 9:40 am

Could you not just have this profile field appear in members' profiles in topics?


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

avatar
SLGray
Administrator
Administrator

Male Posts : 41442
Reputation : 2841
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 11:57 am

Absolutely. But, I'd like to know if there's a way to implement this via a hover drop-down also. It's all about the aesthetics, after all!

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Van-Helsing on November 17th 2017, 12:09 pm

Hello,
Please check this tutorial if it can covers you.
avatar
Van-Helsing
Hyperactive

Male Posts : 2402
Reputation : 111
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 12:24 pm

Ohhh, that's a very useful tutorial, and will probably come in handy in the future; but sadly, that's not what I'm attempting to do. I'd like to something similar, except I want to display the information mentioned in the first post when you hover over the profile picture.

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Van-Helsing on November 17th 2017, 12:25 pm

Have you a sample screenshot to understand what exactly are you needing?
avatar
Van-Helsing
Hyperactive

Male Posts : 2402
Reputation : 111
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 12:32 pm

For example, I've created drop-down menus for when you hover over a forum description's image which display links to certain topics within that forum, as shown below.
https://i.gyazo.com/4c8d482c72aaf23f2688b2a4f44bf413.mp4

However, I've done the above solely through the use of HTML and CSS. (Since I have little to no idea how to use javascript). I'd like a similar drop-down menu (though the aesthetics would be different) to appear when you hover over someone's profile picture within a thread. This drop-down menu should display a profile field from the user's profile (as mentioned in the first post).

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Van-Helsing on November 17th 2017, 1:02 pm

To enable the members tags you must go ACP(Admin Control Panel) > General > Messages and e-mails > Configuration > Messages > Allow usernames tags : Yes

and the setup the permissions.
avatar
Van-Helsing
Hyperactive

Male Posts : 2402
Reputation : 111
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 1:05 pm

I get that, but I don't want the drop-down menu to appear when you hover over a member's name. I want it to appear when you hover over their profile picture.

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Van-Helsing on November 17th 2017, 1:16 pm

Ok now I have been understand what are you needing.

Well i am tagging @Luffy to assist you such he was developed a similar code for phpbb3 at the past.
avatar
Van-Helsing
Hyperactive

Male Posts : 2402
Reputation : 111
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 17th 2017, 1:32 pm

Thank you @Van-Helsing for the notice.

@Gray, so what you want is when someone hovers over the profile picture in a topic of a member, the field to show up below the avatar? Or somewhere else?





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 1:43 pm

Thank you, @Van-Helsing!

And yes, @Luffy. I'd like the information to appear sort of as a tooltip (albeit a clickable tooltip) either to the side of the profile picture or just below it. (With its position set to absolute, so it doesn't displace anything around it).

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 17th 2017, 1:49 pm

Okay, and one other question. Do you want to add a Javascript to accomplish this or do you simple want to do it using bbcodes and CSS only? We can also use both as we can use bbcodes and use the Javascript to hide the bbcodes once edited as well. Which do you prefer?





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 2:10 pm

Ohhh! Interesting choice. Would it be possible to try both? I'm assuming Javascript has more flexibility, but since I'm more used to working with CSS, I might be able to customize it more freely by using pure CSS. But, I'd still like to try it with Javascript+CSS-BBCode first just to see if I can figure out/learn how to customize it to fit the theme of the site.

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 17th 2017, 2:27 pm

Of course. So i will assume you already created the field (as said on the first post). So this code i did not make them so, i am only using them to help you with your code.

Step 1: (field change)
So in the field you already created, and named Tracker, you have to edit the field, and in the default value you have to add this:
Code:
[table id="tracFld"][tr][td][/td][/tr][/table]
and submit this to all profile fields. Of course this will erase everyone's content so you should warn everyone to copy this link they have or save it somewhere or something to add it later on.

Step 2: (Javascript Installation)
Create a new Javascript with information as below:
Name: As you like
Placement: In all the pages
Code: this one:
Code:
$(function() {
  'Personal Title - Give yourself your own personal title !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t413-personal-rank-titles#3302';
 
  var formatBBCode = true;
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/id="tracFld"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table id="tracFld"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };
 
        a[i].onblur = function() {
          this.value = '[table id="tracFld"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
 
  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('phpbb') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('modernbb') ? 4 : document.getElementById('fa_edge') ? 5 : 'badapple',
        closest = ['.poster-profile', '.postprofile', '.user', '.postdetails', '.postprofile', '.postprofile'][version],
        find = ['br:first', 'dt + dd', '.user-basic-info', 'dt + dd', '.postprofile-rank', '.rank-title'][version],
 
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;
 
    if (version == 'badapple') {
      if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
      return;
    }
 
    for (; i < j; i++) {
      title = $('td', a[i]).eq(0);
      title = formatBBCode ? title.html() : title.text();
      if (title) {
        node = $(a[i]).closest(closest).find(find);
        str = '<span id="tracFld">' + title + '</span>';
 
        version == 0 ? node.before(str) : node.append(str);
 
        a[i].style.display = 'none';
      }
    }
  }
});
As you can see the copyrights of the code are still in the code in case you want to study the codes more and how they work.

Step 3: (Adding the CSS)
Now as you can see in all the profiles now it will show this table we added so you can change it's content by simply changing the
Code:
#tracFld{...}
and make it match your theme design.

Saving all these steps should do what you wish to! Smile





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 17th 2017, 2:52 pm

I followed your steps, and it allows me to customize the tracker field, but I'm still not sure how to make it appear by hovering over someone's profile picture. Which also reminds me to ask, what is the CSS selector for someone's profile picture in threads/topics?

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 17th 2017, 3:10 pm

The CSS selector for the profile images in the posts is
Code:
.postprofile dl dt img
but in order to make what you want is this one:

  1. Add in the css this code:
    Code:
    table#tracFld { display: none }
    for it to hide the field in the first place and then
  2. Update the code of the javascript to this one:
    Code:
    $(function() {
      'Personal Title - Give yourself your own personal title !';
      'DEVELOPED BY ANGE TUTEUR';
      'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
      'ORIGIN : http://fmdesign.forumotion.com/t413-personal-rank-titles#3302';
     
      var formatBBCode = true;
     
      // editing of profile field
      if (/\/profile|\/u\d+/.test(window.location.href)) {
        for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
          if (/id="tracFld"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
            a[i].onfocus = function() {
              this.value = this.value.replace(/\n|\r/g, '').replace(/\[table id="tracFld"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
            };
     
            a[i].onblur = function() {
              this.value = '[table id="tracFld"][tr][td]' + this.value + '[/td][/tr][/table]';
            };
          }
        }
      }
     
      // parsing in messages
      else if (/\/t\d+/.test(window.location.href)) {
        var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('phpbb') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('modernbb') ? 4 : document.getElementById('fa_edge') ? 5 : 'badapple',
            closest = ['.poster-profile', '.postprofile', '.user', '.postdetails', '.postprofile', '.postprofile'][version],
            find = ['br:first', 'dt + dd', '.user-basic-info', 'dt + dd', '.postprofile-rank', '.rank-title'][version],
     
            a = $('.fa_personal_title'),
            i = 0,
            j = a.length,
            node, str, title;
     
        if (version == 'badapple') {
          if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
          return;
        }
     
        for (; i < j; i++) {
          title = $('td', a[i]).eq(0);
          title = formatBBCode ? title.html() : title.text();
          if (title) {
            node = $(a[i]).closest(closest).find(find);
            str = '<span id="tracFld">' + title + '</span>';
     
            version == 0 ? node.before(str) : node.append(str);
     
            a[i].style.display = 'none';
          }
        }
      }
      $(".postprofile dl dt img").on("mouseover", function() {
        $("table#tracFld").show();
    }).on("mouseout", function() {
        $("table#tracFld").hide();
    });
    });
    This code has this little bit at the end of it:
    Code:
     $(".postprofile dl dt img").on("mouseover", function() {
        $("table#tracFld").show();
    }).on("mouseout", function() {
        $("table#tracFld").hide();
    });
    which allows the part of the link you have show and hide on mouse hover. That way you may style this field
    Code:
    table#tracFld
    as you want and have it shown wherever you want! Smile





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 18th 2017, 10:37 am

This is still not working as intended, unfortunately.

I added the CSS and Javascript as you directed. The part where the Javascript is meant to automatically wrap it in a table works perfectly, but the hover to show still doesn't work.

My addition to the CSS:
Code:

table#tracFld {
    display: none; 
    background-color: #b8e8f5;
    color: #346cdb;
    text-align: center;
    padding: 5px 0px;
    border-radius: 5px;
    box-shadow: 0 0 15px;
    font-family: "Comic Sans MS";
    cursor: pointer;
    position: absolute;
    min-width: 200px;
    z-index: 1;
    left: 100%;
    top: 0%;   
}

But, when I try to hover over the profile picture the field doesn't show. (and yes, I added content to the tracker field and it does become invisible thanks to the display set to none.)
https://gyazo.com/280c3bfcefbcafbf1d602785fdd6a3ca


Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 18th 2017, 11:33 am

Hello @Gray,

I am terribly sorry, i didn't see that your forum was phpbb2 and the code is for phpbb3. Here's the updated code:
Code:
$(function() {
  'Personal Title - Give yourself your own personal title !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t413-personal-rank-titles#3302';
 
  var formatBBCode = true;
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/id="tracFld"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table id="tracFld"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };
 
        a[i].onblur = function() {
          this.value = '[table id="tracFld"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
 
  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('phpbb') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('modernbb') ? 4 : document.getElementById('fa_edge') ? 5 : 'badapple',
        closest = ['.poster-profile', '.postprofile', '.user', '.postdetails', '.postprofile', '.postprofile'][version],
        find = ['br:first', 'dt + dd', '.user-basic-info', 'dt + dd', '.postprofile-rank', '.rank-title'][version],
 
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;
 
    if (version == 'badapple') {
      if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
      return;
    }
 
    for (; i < j; i++) {
      title = $('td', a[i]).eq(0);
      title = formatBBCode ? title.html() : title.text();
      if (title) {
        node = $(a[i]).closest(closest).find(find);
        str = '<span id="tracFld">' + title + '</span>';
 
        version == 0 ? node.before(str) : node.append(str);
 
        a[i].style.display = 'none';
      }
    }
  }
  $(".postdetails a img").on("mouseover", function() {
    $("table#tracFld").show();
}).on("mouseout", function() {
    $("table#tracFld").hide();
});
});

Due to the fact that your forum is phpbb2, the selector element for the post avatars is
Code:
.postdetails a img
and not the other one i said before.. Wink





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 19th 2017, 1:37 am

@Luffy
Ohhhh, thank you so much! The field does appear on mouseover now, but there's still one more issue to resolve. When the field does appear, it appears at the very top-right corner of the entire page (which I assume is because I've set "top:0%; left: 100%"). What should I change in my CSS to make it appear directly to the left of the profile picture?

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Luffy on November 19th 2017, 11:30 am

@Gray, when you set a specific element to have
Code:
position: absolute;
you should have in mind that, the position may be on the entire forum, if the parent element of it doesn't have
Code:
position: relative;
. So in order for you to fix this you should add in your CSS this code:
Code:
.postdetails { position: relative }

This way, .postdetails (the parent) doesn't allow #tracField (the child) to get out of its dimensions because it is set to relative. So the #tracField's available dimensions is what .postdetails has. Wink





avatar
Luffy
Manager
Manager

Male Posts : 4947
Reputation : 508
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by Gray on November 20th 2017, 3:11 am

Ahhh, that did the trick! Thank you very much for your patience and detailed explanations, @Luffy! You can archive this topic as solved! Everything is working as intended! Very Happy

Gray
Forumember

Posts : 39
Reputation : 1
Language : English

http://www.theromancedawnrp.com/

Back to top Go down

Solved Re: Drop-down menu when hovering on profile picture

Post by SLGray on November 20th 2017, 5:35 am

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


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

avatar
SLGray
Administrator
Administrator

Male Posts : 41442
Reputation : 2841
Language : English
Location : United States

https://fmthemes.forumotion.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