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.

* Mouseover Profile Info

4 posters

Go down

Solved * Mouseover Profile Info

Post by Van-Helsing Wed Oct 23, 2013 6:35 pm

Hi all,
How can you help with scripts to make a member card(like IPB) displayed when the mouse is over the username in forum? Etc in Board Index on latest post. I have shaw that in a forumation forum and I need the scripts(CSS/Javascript) to make it on my forum. I saw member card here
Spoiler:

Guys I have a PHPBB2 forum version is it available for my version?
Best Regards,
Dark-Avenger.


Last edited by Dark-Avenger on Fri Oct 25, 2013 7:49 am; edited 4 times in total
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Wed Oct 23, 2013 6:38 pm

Hello Dark-Avenger,

Can you link us to the forum you've seen this on?
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Van-Helsing Thu Oct 24, 2013 7:56 pm

Bump? Please read again the original ,message I have added details about my forum.

Best Regards,
Dark-Avenger
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 2:07 am

Follow the same steps from the tuto provided by Coolyou, but use this script for phpbb2:

Code:
jQuery(document).ready(function(){
                    jQuery('td.row3.over a[href*="/u"]').mouseover(function(){
                    jQuery(this).parents('strong').css('position', 'relative');
                    jQuery('.perfilInfo').remove();
                    jQuery(this).parents('td.row3.over').css('overflow', 'visible');
                    jQuery(this).before('
                    <div class="perfilInfo" style="position:absolute;">
                    <span class="setPerfil">
                    <span>
                    <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
                    <h2>'+jQuery(this).html()+'</h2>
                    <p><b>Rank:</b><span></span></p>
                    <p><b>Posts:</b><span></span></p>
                    <p><b>Joined:</b><span></span></p>
                    <p><b>Points:</b><span></span></p>
                    <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Send PM</a></span>
                    <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">View Profile</a></span>
                    </span>
                    </span>
                    </span>
                    </div>
                    ');
                    jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
                    var avtPrf = jQuery('td.row1.gensmall img:first', retornoMembro).attr('src');
                    jQuery('.PerfilInfoImg').attr('src', avtPrf);
                    var perfil_rank = jQuery('td table.forumline td.row1.gensmall  img:eq(1)', retornoMembro).attr('alt');
                    var perfil_post = jQuery('#field_id-6 dd', retornoMembro).html();
                    var perfil_cad = jQuery('#field_id-4 dd', retornoMembro).html();
                    var perfil_lastV = jQuery('#field_id-13 dd', retornoMembro).html();
                    jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
                    jQuery('.setPerfil p:eq(1) span').html(perfil_post);
                    jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
                    jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);
                    });
                    //get
                    jQuery('.perfilInfo').mouseleave(function(){
                    jQuery(this).remove();
                    });//mouseleave
                    });
                    //mouseover
                    });
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 2:32 am

What's the script for phpBB 3? Smile
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 5:10 am

JAN2XONLINE wrote:What's the script for phpBB 3? Smile
This:
Code:
jQuery(document).ready(function(){
                    jQuery('dd.lastpost a[href*="/u"]').mouseover(function(){
                    jQuery(this).parents('strong').css('position', 'relative');
                    jQuery('.perfilInfo').remove();
                    jQuery(this).parents('dd.lastpost').css('overflow', 'visible');
                    jQuery(this).before('
                    <div class="perfilInfo" style="position:absolute;">
                    <span class="setPerfil">
                    <span>
                    <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
                    <h2>'+jQuery(this).html()+'</h2>
                    <p><b>Rank:</b><span></span></p>
                    <p><b>Posts:</b><span></span></p>
                    <p><b>Joined:</b><span></span></p>
                    <p><b>Points:</b><span></span></p>
                    <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Send PM</a></span>
                    <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">View Profile</a></span>
                    </span>
                    </span>
                    </span>
                    </div>
                    ');
                    jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
                    var avtPrf = jQuery('div#profile-advanced-right img:first', retornoMembro).attr('src');
                    jQuery('.PerfilInfoImg').attr('src', avtPrf);
                    var perfil_rank = jQuery('div#profile-advanced-right div.module img:eq(1)', retornoMembro).attr('alt');
                    var perfil_post = jQuery('#field_id-6 dd', retornoMembro).html();
                    var perfil_cad = jQuery('#field_id-4 dd', retornoMembro).html();
                    var perfil_lastV = jQuery('#field_id-13 dd', retornoMembro).html();
                    jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
                    jQuery('.setPerfil p:eq(1) span').html(perfil_post);
                    jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
                    jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);
                    });
                    //get
                    jQuery('.perfilInfo').mouseleave(function(){
                    jQuery(this).remove();
                    });//mouseleave
                    });
                    //mouseover
                    });
You'll also need this CSS to fix the text alignment:
Code:
.setPerfil > span > p > span{
display:inline-block;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 5:59 am

Almost perfect. I got some problems here. As you can see here, my rank title is not in there. The box is messy too.
BEFORE EDIT:

EDIT*

I managed to fix the messy box using css. The only problem left is the rank title. Why is it not showing up?
And almost forgot, how do I change the size of the gray semi-transparent border?
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 6:37 am

Ranks retrieved can only be text however, for them to be retrieved an image needs to be present. Place this in rank titles which do not currently have an image:
Code:
http://2img.net/i/fa/empty.gif
You can change the positioning of the content box, and transparent border with this:
Code:
   .setPerfil/*Transparent box*/ {
    width:100%;
    }
    .setPerfil > span/*content box*/ {
    margin-left:5px;
    }
For the height of the mouseover content you'll edit height:177px:
Code:
.perfilInfo {
    background: url(http://i77.servimg.com/u/f77/16/58/45/96/bottom10.png) no-repeat 98% 0;
    float: left;
    height: 177px;
    left: -40em;
    padding: 16px 0 38px 5px;
    top: 13px;
    width: 510px;
    z-index: 999;
    }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 6:42 am

^
Thanks! About the rank, most of us have only text rank except me which I have an icon before my rank title. I think all of my members have only automatic and special ranks without images on it.

* Mouseover Profile Info King10
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 6:48 am

I am not sure, but it should work properly depending on how the image is applied. I've not fully experimented with the code to find out, but applying a blank image seems to act as a hook for retrieving the rank text.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 6:53 am

Oh, it's still not working for me even though I applied the blank image as you said.
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 6:54 am

You applied image here correct?
* Mouseover Profile Info Captur50
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 6:57 am

Damn, my bad. Now it's working. Thanks!
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by Ange Tuteur Fri Oct 25, 2013 6:58 am

Welcome, I should of included that earlier, but I forgot. Razz
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by JAN2XONLINE Fri Oct 25, 2013 7:00 am

It's okay. Very Happy Thanks again.
JAN2XONLINE
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: * Mouseover Profile Info

Post by SLGray Fri Oct 25, 2013 4:31 pm

Topic Solved & Locked


* Mouseover Profile Info 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 : 51569
Reputation : 3525
Language : English
Location : United States

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

Back to top Go down

Back to top

- Similar topics

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