The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Adding online image on avatar widget

2 posters

Go down

Solved Adding online image on avatar widget

Post by TheCrow October 18th 2014, 19:36

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


Last edited by MrMind on October 20th 2014, 10:23; edited 1 time in total
TheCrow
TheCrow
Manager
Manager

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by TheCrow October 19th 2014, 20:38

Bump!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Ange Tuteur October 20th 2014, 02:56

Hello MrMind,

Example :
Adding online image on avatar widget Captu187

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by TheCrow October 20th 2014, 10:22

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

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Ange Tuteur October 20th 2014, 15:47

You're welcome ^^

Topic archived

You too Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum