little help with Mouseover Profile info Script

little help with Mouseover Profile info Script
the code is working on punbb only
im trying to change it so it work on phpbb2
but i still wonder where should i start from

the java Script

Code:

              jQuery(document).ready(function(){
                    jQuery('.tcr a[href*="/u"]').mouseover(function(){
                    jQuery(this).parents('strong').css('position', 'relative');
                    jQuery('.perfilInfo').remove();
                    jQuery(this).parents('.tcr').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('#profile-advanced-right img:first', retornoMembro).attr('src');
                    jQuery('.PerfilInfoImg').attr('src', avtPrf);
                    var perfil_rank = jQuery('#profile-advanced-right .module .main-content 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
                    });

and a CSS code

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;
            }
            .setPerfil > span {
            background: #f9f9f9;
            border: 1px solid #999;
            border-radius: 3px;
            display: block;
            height: 100%;
            padding: 3px;
            }
            .sprite-icon_topic_latest {
            background: url(http://2img.net/i/fa/sprite_icons.png) no-repeat top left;
            background-position: -1083px 0;
            height: 9px;
            width: 11px;
            }
            .setPerfil {
            background: rgba(0,0,0,0.3);
            border-radius: 3px;
            display: block;
            height: 100%;
            padding: 5px 5px 10px;
            }
            .setPerfil .PerfilInfoImg {
            -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            background: #fff;
            border: 1px solid #D5D5D5;
            box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            display: table;
            float: left;
            height: 91px;
            padding: 1px;
            width: 91px;
            }
            .setPerfil h2 {
            background: #E1E1E1;
            border-radius: 0 10px 0 0;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: left;
            font-family: "Trebuchet MS";
            font-size: 19px;
            font-style: normal;
            font-variant: normal;
            font-weight: bold;
            margin-bottom: 10px;
            padding: 5px;
            text-shadow: 1px 1px 0 #fff;
            width: 382px;
            }
            .setPerfil p {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F1F1F1;
            border-left: 3px solid #333;
            border-top: 1px solid #333;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: right;
            font-weight: 400;
            margin: 2px 5px;
            padding: 5px;
            text-align: left;
            width: 350px;
            }
            .setPerfil p {
            font-weight: 400;
            text-align: left;
            }
            .linkPrf {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F6F6F6;
            border: 1px solid #DBDBDB;
            border-radius: 0 0 4px 4px;
            border-top: none;
            bottom: -7px;
            box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);
            color: #616161;
            float: left;
            height: 14px;
            left: 13.8em;
            margin: 2px;
            padding: 2px;
            text-align: center;
            text-decoration: none!important;
            transition: all .2s ease-in-out;
            width: 8em;
            }
            .linkPrf a {
            color: #616161!important;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            text-decoration: none;
            }
            .setPerfil p:hover {
            box-shadow: 1px 1px 0 #9A9A9A;
            }.setPerfil p div {
            display: inline;
            }

the Script is from
punbb.biz site

what does the script do?

_Twisted_Mods_ wrote:what does the script do?

is the title not cleared lol

Mouseover Profile info Script
okay here the preview

when you hover on a username show you info clear now?

Hello,

Here is your answer by Ange Tuteur -> https://help.forumotion.com/t127863-mouseover-profile-info?highlight=mouseover

Good job Mati!

in the 1st place i must thank you for the help
2nd
i think i have some problems in the place of view
its like out of screen page
need to be moved to the right because its way left

pump or what ever
here is what problem i have right now

 
hello
any body home
the problem in image on the last reply still on

link to your forum please

Michael_vx: 
Please don't double post. Your post needs to be separated by at least 24 hours before bumping. Please use the edit button instead!

Since this is your third reminder, you have received a warning.

It is in the CSS:

Code:

float: left;

Hello Michael,

I apologize for the late reply, I've been very busy and forgot about your topic.

Try adding this to your stylesheet :
Display > Colors > CSS stylesheet

Code:

.perfilInfo { left:0 }
.setPerfil { overflow:hidden }

SLGray wrote:Michael_vx: 
Please don't double post. Your post needs to be separated by at least 24 hours before bumping. Please use the edit button instead!

Since this is your third reminder, you have received a warning.

It is in the CSS:

Code:

float: left;

hello
1st thing
im not fond in doing this but
look at the time of Each Reply

Sat 25 Oct - 4:42

Sun 26 Oct - 6:06

i think 24 hours passed already here

Today is 29 Oct at 4:06

that is more then 24

then why ? i did not forget that i must wait 24 hour to pump

and thanks Ange im gonna test and see
Edit
i think its massed up

here is my CSS of the Script
may be could be there something i do not know

Code:

    .perfilInfo { left:0 }
    .setPerfil { overflow:hidden }

        .perfilInfo {
            background: url(http://i77.servimg.com/u/f77/16/58/45/96/bottom10.png) no-repeat 98% 0;
            float: right;
            height: 177px;
            right: -50em;
            top: 13px;
            width: 150px;
            z-index: 0;
            }
            .setPerfil > span {
            background: #f9f9f9;
            border: 1px solid #999;
            border-radius: 5px;
            display: block;
            height: 100%;
            padding: 1px;
            }
            .sprite-icon_topic_latest {
            background: url(http://2img.net/i/fa/sprite_icons.png) no-repeat top left;
            background-position: 0px 0;
            height: 9px;
            width: 11px;
            }
            .setPerfil {
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            display: block;
            height: 100%;
            padding: 5px 5px 10px;
            }
            .setPerfil .PerfilInfoImg {
            -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            background: #fff;
            border: 1px solid #D5D5D5;
            box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            display: table;
            float: right;
            height: 91px;
            padding: 1px;
            width: 91px;
            }
            .setPerfil h2 {
            background: #E1E1E1;
            border-radius: 0 10px 0 0;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: right;
            font-family: "Times New Roman";
            font-size: 19px;
            font-style: normal;
            font-variant: normal;
            font-weight: bold;
            margin-bottom: 1px;
            padding: 5px;
            text-shadow: 1px 1px 0 #fff;
            width: 202px;
            }
            .setPerfil p {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F1F1F1;
            border-left: 3px solid #333;
            border-top: 1px solid #333;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: right;
            font-weight: 200;
            margin: 2px 5px;
            padding: 5px;
            text-align: right;
            width: 200px;
            }
            .setPerfil p {
            font-weight: 20;
            text-align: right;
            }
            .linkPrf {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F6F6F6;
            border: 1px solid #DBDBDB;
            border-radius: 0 0 4px 4px;
            border-top: none;
            bottom: 0px;
            box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);
            color: #616161;
            float: right;
            height: 10px;
            right: 50em;
            margin: 2px;
            padding: 2px;
            text-align: right;
            text-decoration: none!important;
            transition: all .2s ease-in-out;
            width: 8em;
            }
            .linkPrf a {
            color: #616161!important;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            text-decoration: none;
            }
            .setPerfil p:hover {
            box-shadow: 1px 1px 0 #9A9A9A;
            }.setPerfil p div {
            display: inline;
            }

It must have been a glitch, because when I looked at your posts, they were on the same day.

my topic lost again
and can i ask for that Spider code at the top right side too

Michael_vx wrote:my topic lost again
and can i ask for that Spider code at the top right side too

Sorry, I've had no internet for the past few days. ^^ Could you provide your forum link ? Thanks

Here : https://help.forumotion.com/t136449-decorate-your-forum-for-halloween

the forum link
http://micsoft.logu2.com
right now i use the java script without CSS

Try this :

Code:

           .perfilInfo {
            background: url(http://i77.servimg.com/u/f77/16/58/45/96/bottom10.png) no-repeat 98% 0;
            float: right;
            height:320px;
            width: 300px;
            top: 13px;
            left:0;
            z-index: 9;
            }
            .setPerfil { overflow:hidden; }
            .setPerfil > span {
            background: #f9f9f9;
            border: 1px solid #999;
            border-radius: 5px;
            display: block;
            height: 100%;
            padding: 1px;
            }
            .sprite-icon_topic_latest {
            background: url(http://2img.net/i/fa/sprite_icons.png) no-repeat top left;
            background-position: 0px 0;
            height: 9px;
            width: 11px;
            }
            .setPerfil {
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            display: block;
            height: 100%;
            padding: 5px 5px 10px;
            }
            .setPerfil .PerfilInfoImg {
            -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            background: #fff;
            border: 1px solid #D5D5D5;
            box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            display: table;
            float: right;
            height: 91px;
            padding: 1px;
            width: 91px;
            }
            .setPerfil h2 {
            background: #E1E1E1;
            border-radius: 0 10px 0 0;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: right;
            font-family: "Times New Roman";
            font-size: 19px;
            font-style: normal;
            font-variant: normal;
            font-weight: bold;
            margin-bottom: 1px;
            padding: 5px;
            text-shadow: 1px 1px 0 #fff;
            width: 202px;
            }
            .setPerfil p {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F1F1F1;
            border-left: 3px solid #333;
            border-top: 1px solid #333;
            box-shadow: 1px 1px 0 #CCC;
            display: block;
            float: right;
            font-weight: 200;
            margin: 2px 5px;
            padding: 5px;
            text-align: right;
            width: 200px;
            }
            .setPerfil p {
            font-weight: 20;
            text-align: right;
            }
            .linkPrf {
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            background: #F6F6F6;
            border: 1px solid #DBDBDB;
            border-radius: 0 0 4px 4px;
            border-top: none;
            bottom: 0px;
            box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);
            color: #616161;
            float: right;
            height: 10px;
            right: 50em;
            margin: 2px;
            padding: 2px;
            text-align: right;
            text-decoration: none!important;
            transition: all .2s ease-in-out;
            width: 8em;
            }
            .linkPrf a {
            color: #616161!important;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            text-decoration: none;
            }
            .setPerfil p:hover {
            box-shadow: 1px 1px 0 #9A9A9A;
            }.setPerfil p div {
            display: inline;
            }

about how it looks
its cool
only that the pop up still way left out the page
its only the position only left
all what i wish is to be bit more to the right side
and will be solved
Edit
i forget to ask about something
the Script is working only on home page
can it work on the sub forums and any username when hover over it ?
will its if only possible

Try adding this :

Code:

.perfilInfo { left:0px !important }

Increase the amount of pixels if needed.

worked like a charm
thanks a lot
the last thing if possible the Script marked on all pages but its appear only at home page can I or any way to make it appear on any user link any where at the pages
im just asking only if it possible like sub forums the most recent topics
thanks again for the help


^_^

Try replacing your script by :

Code:

jQuery(document).ready(function(){
  var a = document.getElementsByTagName('A');
  for (i=0;i<a.length;i++) if (/\/u\d+/.test(a[i].href)) a[i].className += ' mouseover-profil';
  
                    jQuery('.mouseover-profil').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
});

I just added this to the beginning of the script to add a classname to user links :

Code:

 var a = document.getElementsByTagName('A');
  for (i=0;i<a.length;i++) if (/\/u\d+/.test(a[i].href)) a[i].className += ' mouseover-profil';

yeah super cool
worked every where now except the most recent topics may be its because i use java script recent topics
i thank you from my heart i know its not enough to just say thanks a lot

Solved

Yeah, if the recent topics has scrolling most javascript events don't work unless you bind them. You're welcome ^^

Topic archived

Have a great day.