[Hỏi đáp] Profile Preview on mouseover

Question: In viewtopic_body, mouseover on user profile, it shows the user's details. I have found this design in many site and also in this forum I found this.
Can anyone share the code?



My forum: http://www.bdtipsntricks.com/
Version: PunBB

Answer: https://devs.forumvi.com/t62-hoi-dap-profile-preview-on-mouseover?showpost=p329

Please give me the code structure, I will try to add this my self :)

Code:

<div class="user-basic-info"><img src="http://r20.imgfast.net/users/2017/44/87/72/avatars/1-61.jpg" />
<div class="user">The Profile</div></div>

<style>
.user-basic-info img:hover+.user{display: block;}
.user{display: none;}
</style>

This code =))

Thank you, but this code is not enough to help me. Waiting for others answer.

CSS:

Code:

.dropRight,.dropRight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.pun .post .user{overflow:visible;margin-left:-13em;width:12em}
.pun .postmain{margin-left:13em}
.postfoot{margin-left:-13em}
.pun .post:hover{border-left:1px solid #359bed;margin-left:-1px}
.dropRight{z-index:10;position:relative;background:transparent;border:1px solid transparent;width:1px;margin-left:-3px;white-space:nowrap;transition:width .2s;-webkit-transition:width .2s;overflow:hidden;padding:10px 0 10px 13em !important}
.dropRight:hover{background:#fff;width:542px;border-color:#359bed #359bed #359bed #FFF}
.dropRight .poster-avatar{float:left;margin-left:-12em}
.dropRight .poster-avatar a{background:url(http://i56.servimg.com/u/f56/18/59/49/93/noavat10.jpg) no-repeat center #FFF;border:1px solid #DDD;min-height:122px;display:block;width:132px}
.dropRight .poster-avatar img{background:#FFF;min-height:122px;max-height:155px;width:130px;padding:5px}
.dropRight .poster-info{white-space:normal;padding-right:10px;display:none;width:380px}
.dropRight:hover .poster-info{display:block}
.poster-info .poster-field{border:1px dashed #DDD;border-width:1px 0;margin:5px 0;padding:5px 0}
.poster-info .poster-field p{line-height:20px;color:#999;width:180px;display:inline-block}
.poster-info .poster-field p.status{font-style:italic;width:100%;color:#0085FF}
.poster-info .poster-field p.status .label{font-weight:700}
.poster-connect{display:inline-block;width:27px;height:16px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/icon_u11.gif) no-repeat transparent}
.poster-connect img{background:#fff}
.poster-rank{float:right;margin-top:-7px}
.poster-link a{padding-right:13px}

Viewtopic_body:

Find:

Code:

<div class="user-ident">
   <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
   <div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}<br />
      {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
   </div>
</div>
<div class="user-info">
   {postrow.displayed.ONLINE_IMG}
   <!-- BEGIN profile_field -->
   {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
   <!-- END profile_field -->
   {postrow.displayed.POSTER_RPG}
</div>

Replace with:

Code:

<div class="user-ident dropRight">   
   <div class="poster-avatar">
      {postrow.displayed.POSTER_AVATAR}
   </div>   
   <div class="poster-info">      
      <div>         
         <span class="poster-name">
            {postrow.displayed.POSTER_NAME}
         </span>         
         <span class="poster-connect">
            {postrow.displayed.ONLINE_IMG}
         </span>         
         <span class="poster-rank">
            {postrow.displayed.RANK_IMAGE}
         </span>
      </div>      
      <div class="poster-field">         
         <!-- BEGIN profile_field -->         
         <p>
            {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}
         </p>         
         <!-- END profile_field -->
      </div>      
      <div class="poster-link">         
         <a target="_blank" href="/profile.forum?mode=viewprofile&u=POSTER_NAME&page_profil=messages">            
            <img alt="Tường nhà" src="http://i48.servimg.com/u/f48/16/58/89/73/profil10.png" /> Tường nhà
         </a>         
         <a target="_blank" href="/spa/POSTER_NAME">            
            <img alt="Xem bài viết" src="http://i48.servimg.com/u/f48/16/58/89/73/total_10.gif" /> Bài viết                              </a>         
         <a target="_blank" href="/profile?friend=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">            
            <img alt="Kết bạn" src="http://i48.servimg.com/u/f48/16/58/89/73/friend10.png" /> Kết bạn
         </a>         
         <a target="_blank" href="/profile?foe=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">            
            <img alt="Chặn người này" src="http://i57.servimg.com/u/f57/17/05/17/70/button10.png" /> Ngăn cấm
         </a>
      </div>
   </div>
</div>

Add to the end viewtopic_body:

Code:

<script type="text/javascript">
$(".poster-info .label:contains('Status')").parent().addClass("status");
$(".poster-link a").attr("href", function () {
   return this.href.replace(/POSTER_NAME/, encodeURI($.trim($(this).closest(".poster-info").find(".poster-name").text())));
});
</script>

sao toàn tiếng anh hướng dẫn tiếng việt được ko mình mù English

Reuphong wrote:sao toàn tiếng anh hướng dẫn tiếng việt được ko mình mù English

chèn vào CSS:

Code:

.dropRight,.dropRight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.pun .post .user{overflow:visible;margin-left:-13em;width:12em}
.pun .postmain{margin-left:13em}
.postfoot{margin-left:-13em}
.pun .post:hover{border-left:1px solid #359bed;margin-left:-1px}
.dropRight{z-index:10;position:relative;background:transparent;border:1px solid transparent;width:1px;margin-left:-3px;white-space:nowrap;transition:width .2s;-webkit-transition:width .2s;overflow:hidden;padding:10px 0 10px 13em !important}
.dropRight:hover{background:#fff;width:542px;border-color:#359bed #359bed #359bed #FFF}
.dropRight .poster-avatar{float:left;margin-left:-12em}
.dropRight .poster-avatar a{background:url(http://i56.servimg.com/u/f56/18/59/49/93/noavat10.jpg) no-repeat center #FFF;border:1px solid #DDD;min-height:122px;display:block;width:132px}
.dropRight .poster-avatar img{background:#FFF;min-height:122px;max-height:155px;width:130px;padding:5px}
.dropRight .poster-info{white-space:normal;padding-right:10px;display:none;width:380px}
.dropRight:hover .poster-info{display:block}
.poster-info .poster-field{border:1px dashed #DDD;border-width:1px 0;margin:5px 0;padding:5px 0}
.poster-info .poster-field p{line-height:20px;color:#999;width:180px;display:inline-block}
.poster-info .poster-field p.status{font-style:italic;width:100%;color:#0085FF}
.poster-info .poster-field p.status .label{font-weight:700}
.poster-connect{display:inline-block;width:27px;height:16px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/icon_u11.gif) no-repeat transparent}
.poster-connect img{background:#fff}
.poster-rank{float:right;margin-top:-7px}
.poster-link a{padding-right:13px}

vào Viewtopic_body:
tìm:

Code:

<div class="user-ident">
  <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
  <div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}<br />
      {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
  </div>
</div>
<div class="user-info">
  {postrow.displayed.ONLINE_IMG}
  <!-- BEGIN profile_field -->
  {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
  <!-- END profile_field -->
  {postrow.displayed.POSTER_RPG}
</div>

Thay thành :

Code:

<div class="user-ident dropRight"> 
  <div class="poster-avatar">
      {postrow.displayed.POSTER_AVATAR}
  </div> 
  <div class="poster-info">     
      <div>       
        <span class="poster-name">
            {postrow.displayed.POSTER_NAME}
        </span>       
        <span class="poster-connect">
            {postrow.displayed.ONLINE_IMG}
        </span>       
        <span class="poster-rank">
            {postrow.displayed.RANK_IMAGE}
        </span>
      </div>     
      <div class="poster-field">       
        <!-- BEGIN profile_field -->       
        <p>
            {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}
        </p>       
        <!-- END profile_field -->
      </div>     
      <div class="poster-link">       
        <a target="_blank" href="/profile.forum?mode=viewprofile&u=POSTER_NAME&page_profil=messages">           
            <img alt="Tường nhà" src="http://i48.servimg.com/u/f48/16/58/89/73/profil10.png" /> Tường nhà
        </a>       
        <a target="_blank" href="/spa/POSTER_NAME">           
            <img alt="Xem bài viết" src="http://i48.servimg.com/u/f48/16/58/89/73/total_10.gif" /> Bài viết                              </a>       
        <a target="_blank" href="/profile?friend=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">           
            <img alt="Kết bạn" src="http://i48.servimg.com/u/f48/16/58/89/73/friend10.png" /> Kết bạn
        </a>       
        <a target="_blank" href="/profile?foe=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">           
            <img alt="Chặn người này" src="http://i57.servimg.com/u/f57/17/05/17/70/button10.png" /> Ngăn cấm
        </a>
      </div>
  </div>
</div>

Thêm vào cuối viewtopic_body:

Code:

<script type="text/javascript">
$(".poster-info .label:contains('Status')").parent().addClass("status");
$(".poster-link a").attr("href", function () {
  return this.href.replace(/POSTER_NAME/, encodeURI($.trim($(this).closest(".poster-info").find(".poster-name").text())));
});
</script>

hết