Adding online image on avatar widget

Hello,

On the widget of my team members can i add the online icon if they are online?
https://help.forumotion.com/t136192-names-poping-out-the-avatar-in-widget#918378

Bump!

Hello MrMind,

Example :


Try replacing your widget by :

Code:

<script type="text/javascript">
  myStaff = ['/u1', '/u2', '/u7', '/u14', '/u23'];
  onlineImg = 'http://2img.net/i/fa/Online.png';
  staff_cache_time = 1*60*1000; // mm*ss*ms;
</script>

<style type="text/css">
#userTable a { position:relative }
#userTable a .popable {
  font-size:0;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
  padding:3px;
  opacity:0;
  position:absolute;
  white-space:nowrap;
  left:0;
  bottom:10px;
  z-index:9;
  transition:300ms;
}
#userTable a:hover .popable {
  font-size:12px;
  opacity:1;
}
  
.userBox {
  display:inline-block;
  position:relative;
}

.onlineImg {
  position:absolute;
  z-index:9;
  left:-5px;
  top:-3px;
}
</style>

<div align="center" id="userTable">
<div id="theContent" style="display:none"></div>
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
  <span class="userBox"><a href="/u1"><span class="popable">Sherlock H.</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a></span>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<span class="userBox"><a href="/u14"><span class="popable">Warrior7</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a></span>
<span class="userBox"><a href="/u2"><span class="popable">#theodore#</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a></span>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
  <span class="userBox"><a href="/u7"><span class="popable">aimilios</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a></span>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
  <span class="userBox"><a href="/u23"><span class="popable">Xristos</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a></span>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

<script type="text/javascript">
if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#userTable').html(localStorage.staffOn);
else loadStaff();
function loadStaff() {
  jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
    for (i=0; i<myStaff.length; i++) {
      jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).insertBefore('#userTable a[href="'+myStaff[i]+'"]').css('display','none').after('<img class="onlineImg" src="'+onlineImg+'">');
    }
    if (window.localStorage) {
      localStorage.staffOn = jQuery('#userTable').html();
      localStorage.staffEx = +new Date;
    }
  })
}
</script>

I added a script and some changes to HTML. At the top there are settings :

Code:

<script type="text/javascript">
  myStaff = ['/u1', '/u2', '/u7', '/u14', '/u23'];
  onlineImg = 'http://2img.net/i/fa/Online.png';
  staff_cache_time = 1*60*1000; // mm*ss*ms;
</script>

myStaff : The URLs of your staff members profiles. e.g. /u1

onlineImg : The image displayed if a member is online

staff_cache_time : The time the widget is cached. Currently 2 minutes.

Τhank you! This is solve!
Have a great week!

You're welcome ^^

Topic archived

You too