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.

little help with Mouseover Profile info Script

View previous topic View next topic Go down

Solved little help with Mouseover Profile info Script

Post by Michael_vx on October 24th 2014, 7:12 am

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://illiweb.com/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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by _Twisted_Mods_ on October 24th 2014, 7:52 am

what does the script do?

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 24th 2014, 10:01 am

@_Twisted_Mods_ wrote:what does the script do?
What the fuck ?!?
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?

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Mati on October 24th 2014, 11:21 am


Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Hagoromo Otsutsuki on October 24th 2014, 4:08 pm

Good job Mati!

Hagoromo Otsutsuki
Forumember

Male Posts : 514
Reputation : 21
Language : English
Location : Heaven

http://naruto-omniverse.forumotion.com/

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 25th 2014, 4:42 am

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 26th 2014, 6:06 am

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 29th 2014, 4:06 am

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by _Twisted_Mods_ on October 29th 2014, 4:43 am

link to your forum please

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by SLGray on October 29th 2014, 5:38 am

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;


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


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on October 29th 2014, 6:36 am

Hello Michael,

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

Try adding this to your stylesheet :
Display > Colors > CSS stylesheet
Code:
.perfilInfo { left:0 }
.setPerfil { overflow:hidden }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 29th 2014, 1:13 pm

@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 Sad

Today is 29 Oct at 4:06

that is more then 24 Sad

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

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 blackeye
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://illiweb.com/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;
            }

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by SLGray on October 29th 2014, 5:17 pm

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


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


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 31st 2014, 8:14 pm

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on October 31st 2014, 8:25 pm

@Michael_vx wrote:my topic lost again Very Happy
and can i ask for that Spider code at the top right side too Smile
Sorry, I've had no internet for the past few days. ^^ Could you provide your forum link ? Thanks Smile

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on October 31st 2014, 8:41 pm

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on October 31st 2014, 9:16 pm

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://illiweb.com/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;
  }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on November 1st 2014, 7:14 am

about how it looks
its cool
only that the pop up still way left out the page
its only the position only left Sad
all what i wish is to be bit more to the right side
and will be solved Smile
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 Very Happy

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on November 1st 2014, 7:42 am

Try adding this :
Code:
.perfilInfo { left:0px !important }

Increase the amount of pixels if needed.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on November 1st 2014, 7:53 am

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 Very Happy
im just asking only if it possible like sub forums the most recent topics Very Happy
thanks again for the help


^_^

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on November 1st 2014, 8:11 pm

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';

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Michael_vx on November 1st 2014, 9:59 pm

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

Solved

Smile

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: little help with Mouseover Profile info Script

Post by Ange Tuteur on November 1st 2014, 10:04 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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