Δημοσιεύτηκε Σαβ Ιουν 14, 2014 7:57 am
Αυτός ο οδηγός σας θα σας δώσει την επιλογή, όταν περάσετε το ποντίκι πάνω από το όνομα κάπου χρήστη στις τελευταίες δημοσιεύσεις, να σας ανοίγει το προφίλ του σε ένα μικρό παράθυρο. (Mouseover Profile Info)
Συγγραφέας: Shadow
Javascript
Τίτλος: Ότι θέλετε
Τοποθέτηση: In all the pages
Κώδικας:
CSS
Προεπισκόπιση
Ο οδηγός γράφτηκε από τον Rapid, δημοσιεύτηκε στο PunBB.biz και μεταφράστηκε στο PunBB GR.
Συγγραφέας: Shadow
Javascript
Τίτλος: Ότι θέλετε
Τοποθέτηση: In all the pages
Κώδικας:
- Κώδικας:
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
});
CSS
- Κώδικας:
.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;
}
Προεπισκόπιση
Ο οδηγός γράφτηκε από τον Rapid, δημοσιεύτηκε στο PunBB.biz και μεταφράστηκε στο PunBB GR.