Homelittle help with Mouseover Profile info Script
+2
_Twisted_Mods_
Michael_vx
6 posters
Page 1 of 1
little help with Mouseover Profile info Script
by Michael_vx 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
and a CSS code
the Script is from
punbb.biz site
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
Michael_vx- Forumember
-
Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by _Twisted_Mods_ October 24th 2014, 7:52 am
what does the script do?
_Twisted_Mods_- Helper
- Posts : 2083
Reputation : 336
Language : English
Location : Ms -
Re: little help with Mouseover Profile info Script
by Michael_vx October 24th 2014, 10:01 am
_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?
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Mati October 24th 2014, 11:21 am
Hello,
Here is your answer by Ange Tuteur -> https://help.forumotion.com/t127863-mouseover-profile-info?highlight=mouseover
Here is your answer by Ange Tuteur -> https://help.forumotion.com/t127863-mouseover-profile-info?highlight=mouseover
Mati- Active Poster
- Posts : 1932
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services -
Re: little help with Mouseover Profile info Script
by Beyonder October 24th 2014, 4:08 pm
Good job Mati!
Beyonder- Forumember
- Posts : 726
Reputation : 29
Language : English
Location : Beyond Realm -
Re: little help with Mouseover Profile info Script
by Michael_vx 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
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
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Michael_vx October 26th 2014, 6:06 am
pump or what ever 
here is what problem i have right now
here is what problem i have right now
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Michael_vx October 29th 2014, 4:06 am
hello
any body home
the problem in image on the last reply still on
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by _Twisted_Mods_ October 29th 2014, 4:43 am
link to your forum please
_Twisted_Mods_- Helper
- Posts : 2083
Reputation : 336
Language : English
Location : Ms -
Re: little help with Mouseover Profile info Script
by SLGray 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:
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;
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
- Posts : 51554
Reputation : 3524
Language : English
Location : United States -
Re: little help with Mouseover Profile info Script
by Ange Tuteur October 29th 2014, 6:36 am
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
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 }
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: little help with Mouseover Profile info Script
by Michael_vx October 29th 2014, 1:13 pm
helloSLGray 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;
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;
}
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by SLGray 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.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
- Posts : 51554
Reputation : 3524
Language : English
Location : United States -
Re: little help with Mouseover Profile info Script
by Michael_vx October 31st 2014, 8:14 pm
my topic lost again
and can i ask for that Spider code at the top right side too
and can i ask for that Spider code at the top right side too
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Ange Tuteur October 31st 2014, 8:25 pm
Sorry, I've had no internet for the past few days. ^^ Could you provide your forum link ? ThanksMichael_vx wrote:my topic lost again
and can i ask for that Spider code at the top right side too
Here : https://help.forumotion.com/t136449-decorate-your-forum-for-halloween
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Ange Tuteur 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://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;
}
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: little help with Mouseover Profile info Script
by Michael_vx 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
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
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
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Ange Tuteur November 1st 2014, 7:42 am
Try adding this :
Increase the amount of pixels if needed.
- Code:
.perfilInfo { left:0px !important }
Increase the amount of pixels if needed.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: little help with Mouseover Profile info Script
by Michael_vx 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
im just asking only if it possible like sub forums the most recent topics
thanks again for the help
^_^
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
^_^
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Ange Tuteur November 1st 2014, 8:11 pm
Try replacing your script by :
I just added this to the beginning of the script to add a classname to user links :
- 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
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: little help with Mouseover Profile info Script
by Michael_vx 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
i thank you from my heart i know its not enough to just say thanks a lot
Solved
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
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: little help with Mouseover Profile info Script
by Ange Tuteur 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.
Topic archived
Have a great day.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Similar topics» * Mouseover Profile Info
» Profile script help
» How to center profile info in posts
» Centering Profile Info in Invision
» Avatars missing and profile info
» Profile script help
» How to center profile info in posts
» Centering Profile Info in Invision
» Avatars missing and profile info
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
