Hovering online icon near name.

by Scarlet D. November 4th 2016, 3:22 am

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Who the problem concerns : All members
Forum link : http://onepiecegr.forum-pro.org/

Description of problem

Hello I'd like to make a change on the user side of the topics, i'd like the "online button" which is just below the name to stick (hover) at the left side of it's member's username who is online. I really tried to use many guides but each and every one of them failed dramatically to do what i wanted to do.

thanks a lot, here is the html script that changes that kind of things

Spoiler:

Code:: <script type="text/javascript">//<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" }; $(function(){ if(typeof(_atc) == "undefined") { _atc = { }; } _atc.cwait = 0; $('.addthis_button').mouseup(function(){ if ($('#at15s').css('display') == 'block') { addthis_close(); } }); }); var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' }; showHiddenMessage = function(id) { try { var regId = parseInt(id, 10); if( isNaN(regId) ) { regId = 0; } if( regId > 0) { $('.post--' + id).toggle(0, function() { if( $(this).is(":visible") ) { $('#hidden-title--' + id).html(hiddenMsgLabel.visible); } else { $('#hidden-title--' + id).html(hiddenMsgLabel.hidden); } }); } } catch(e) { } return false; }; //]]> </script>  <div id="pun-visit" class="clearfix"> <ul>  <li> <script type="text/javascript">//<![CDATA[ var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}'; var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}'; var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}'; var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}'; var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}'; var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </li>  <li><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a></li> <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li> <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>  <li>{S_WATCH_TOPIC}</li>  </ul> <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p> </div>   <div id="pun-visit"> <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p> </div>  <div class="pun-crumbs noprint clearfix"> <span class="crumbs"> <a href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC} »  <strong><a href="{TOPIC_URL}"><span>{TOPIC_TITLE}</span></a></strong> </span> <div class="right">  <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  </div> </div> <div class="main paged"> <div class="paged-head clearfix"> <h1>{TOPIC_TITLE}</h1>  <p class="paging">{PAGINATION}</p>  <p class="posting">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>  </p> </div> {POLL_DISPLAY} <div class="main-head clearfix"> <p class="h2"> <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a>   {L_MESSAGE} [{PAGE_NUMBER}] </p> </div> <div class="main-content topic">   <p class="p-hidden">{postrow.hidden.MESSAGE}</p>   <div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}"> <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -20px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a> <div class="postmain"{postrow.displayed.THANK_BGCOLOR}> <div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}> <h2> <strong>{postrow.displayed.COUNT_POSTS}</strong> {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW} </h2> </div> <div class="postbody"{postrow.displayed.THANK_BGCOLOR}> <div class="user"> <div class="user-ident"> <div id="wrapper"> <h4 class="username">{postrow.displayed.POSTER_NAME}</h4> <div class="online">{postrow.displayed.ONLINE_IMG}</div></div> <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">  <font color="black"><b>{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</b></font>  {postrow.displayed.POSTER_RPG} </div> </div> <div class="post-entry"> <div class="entry-content">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />  <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}   {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <div class="clear"></div> </div> <p> {postrow.displayed.EDITED_MESSAGE} </p> </div> </div> </div>  <div class="sig-content"> {postrow.displayed.SIGNATURE_NEW} </div>  <div class="postfoot"> <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </div> <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </div> <div style="clear:both;"></div> </div> </div> </div>  </div> <hr id="first-post-br" /> <div class="main-content topic">    </div> <div class="main-foot clearfix"> <p class="h2"> <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a>   {L_MESSAGE} [{PAGE_NUMBER}] </p> <p class="options"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />  {S_TOPIC_ADMIN}  </p> </div> <a name="bottomtitle"></a> <div class="paged-foot clearfix">  <p class="paging">{PAGINATION}</p>  <p class="posting">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>  </p> </div> </div> <div class="pun-crumbs"> <p class="crumbs"> <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} »  <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong> </p> </div>  <div class="main" id="ptrafic_close" style="display:none"> <div class="main-head clearfix"> <p class="h2">{PROMOT_TRAFIC_TITLE}</p> <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p> </div> </div> <div class="main" id="ptrafic_open" style="display:''"> <div class="main-head clearfix"> <p class="h2">{PROMOT_TRAFIC_TITLE}</p> <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p> </div> <div class="main-content clearfix">  » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />  </div> </div>   <div class="main" id="forum_rules"> <div class="main-head clearfix"> <p class="h2">{L_FORUM_RULES}</p> </div> <table class="main-content frm"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules entry-content"> {RULE_MSG} </td> </tr> </table> </div>   <a name="quickreply"></a> {QUICK_REPLY_FORM}  <div id="pun-info" class="main"> <div class="main-content"> <div id="stats"> <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p> </div> </div> </div>  <script type="text/javascript"> //<![CDATA[ $(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} })); //]]> </script>    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" async></script>