The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Adding online image on avatar widget

View previous topic View next topic Go down

Solved Adding online image on avatar widget

Post by Luffy on October 18th 2014, 6:36 pm

Hello,

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


Last edited by MrMind on October 20th 2014, 9:23 am; edited 1 time in total

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Luffy on October 19th 2014, 7:38 pm

Bump!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Ange Tuteur on October 20th 2014, 1:56 am

Hello MrMind,

Example :


Try replacing your widget by :
Code:
<script type="text/javascript">
  myStaff = ['/u1', '/u2', '/u7', '/u14', '/u23'];
  onlineImg = 'http://illiweb.com/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://illiweb.com/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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Luffy on October 20th 2014, 9:22 am

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Adding online image on avatar widget

Post by Ange Tuteur on October 20th 2014, 2:47 pm

You're welcome ^^

Topic archived

You too Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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