[Javascript] Staff Online - Widget - 2014-10-02, 14:25
Description:
Widget to show all of the staff members online.
Installation steps:
Code by @Daemon (.Load() function, this code is unstable.)
1º - Widget
Create a new widget [tip]Admin Panel -> Modules -> Forum Widget Manager => Create a new widget[/tip]
Explanation:
[ic]group1: jQuery('.table span[style="color:#FF6600"]', data).parents('td'),[/ic]
This part of the code will display users with group color [ic]"#FF6600"[/ic] to staff online widget.
For example if your Administrator group color is [ic]#FF0000[/ic] (red) the code should look like this:
[ic]group1: jQuery('.table span[style="color:#FF0000"]', data).parents('td'),[/ic]
So you need to change that part of the code with your group color, in this you have 4 different colors (group1, group2, group3, group4) - so you can change everyone with your group colors. After that save the widget and that's it.
2º - CSS
Put the following code in your CSS.
Preview:
Widget to show all of the staff members online.
Installation steps:
- Code:
[panda=js] <div id="Staff_Online">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
var widget = jQuery('#Staff_Online')[0];
staff_cache_time = 4*60*1000; // mm*ss*ms;
if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) {
jQuery(widget).html(localStorage.staffOn)
} else {
jQuery.get('/viewonline', function (data) {
var group = {
ffnd: jQuery('.table span[style="color:#990012"]', data).parents('td'),
adm: jQuery('.table span[style="color:#FF0000"]', data).parents('td'),
gmod: jQuery('.table span[style="color:#800080"]', data).parents('td'),
fmod: jQuery('.table span[style="color:#7057FA"]', data).parents('td'),
tsup: jQuery('.table span[style="color:#0020C2"]', data).parents('td'),
};
jQuery(widget).append(group.ffnd).append(group.adm).append(group.gmod).append(group.fmod).append(group.tsup);
jQuery('#Staff_Online a[href^="/u"]').each(function () {
var prof = jQuery(this).attr('href');
jQuery('<a href="' + prof + '" class="avatarimage"></a>').insertBefore(this);
jQuery('<div class="Info"></div>').insertAfter(this);
jQuery(this).prev().load(prof + ' #profile-advanced-right .main-content img:eq(0)');
jQuery(this).next().load(prof + ' #field_id5 dd div:eq(0)')
})
});
jQuery(window).on('load', function () {
localStorage.staffOn = document.getElementById(widget).innerHTML;
localStorage.staffEx = +new Date;
})
}
});
</script> <style>
#Staff_Online .avatarimage > img {
float: left;
margin-right: 4px!important;
width: 40px;
height: 40px;
border: 1px solid #0000CD;
border-radius: 4px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
#Staff_Online .Info {
color: #0000A0;
margin: 1px 45px;
padding: 8px 1px 5px;
width: 190px;
display: inline;
}
#Staff_Online {
height: auto;
}
#Staff_Online td {
display: block;
}
</style>
Code by @Daemon (.Load() function, this code is unstable.)
1º - Widget
Create a new widget [tip]Admin Panel -> Modules -> Forum Widget Manager => Create a new widget[/tip]
- Code:
[panda=html]<div class="module main">
<div class="main-head">
<div class="h3">
Staff Online
</div>
</div>
<div class="main-content clearfix">
<div id="staff_widget">
</div>
<script>jQuery(document).ready(function () {
var widget = jQuery('#staff_widget')[0];
storedValue = sessionStorage.getItem('online_staff');
if (storedValue) {
jQuery(widget).html(storedValue)
} else {
jQuery.get('/viewonline', function (data) {
var group = {
group1: jQuery('.table span[style="color:#FF6600"]', data).parents('td'),
group2: jQuery('.table span[style="color:#691F67"]', data).parents('td'),
group3: jQuery('.table span[style="color:#00A1BA"]', data).parents('td'),
group4: jQuery('.table span[style="color:#CC66CC"]', data).parents('td'),
};
jQuery(widget).append(group.group1).append(group.group2).append(group.group3).append(group.group4);
jQuery('#staff_widget a[href^="/u"]').each(function () {
var prof = jQuery(this).attr('href');
jQuery('<a href="' + prof + '" class="lastpost-avatar"></a>').insertBefore(this);
jQuery('<div class="userTitle"></div>').insertAfter(this);
jQuery(this).prev().load(prof + ' #profile-advanced-right .main-content img:eq(0)');
jQuery(this).next().load(prof + ' #field_id1 dd div:eq(0)')
})
});
jQuery(window).on('load', function () {
var currentValue = document.getElementById(widget).innerHTML;
sessionStorage.setItem('online_staff', currentValue)
})
}
});</script>
Explanation:
[ic]group1: jQuery('.table span[style="color:#FF6600"]', data).parents('td'),[/ic]
This part of the code will display users with group color [ic]"#FF6600"[/ic] to staff online widget.
For example if your Administrator group color is [ic]#FF0000[/ic] (red) the code should look like this:
[ic]group1: jQuery('.table span[style="color:#FF0000"]', data).parents('td'),[/ic]
So you need to change that part of the code with your group color, in this you have 4 different colors (group1, group2, group3, group4) - so you can change everyone with your group colors. After that save the widget and that's it.
2º - CSS
Put the following code in your CSS.
- Code:
[panda=css]#staff_widget td {
display: block;
padding: 6px 0;
zoom: 1;
}
#staff_widget .avt_staff {
margin-right: 5px;
float: left;
zoom: 1;
}
#staff_widget .userTitle {
color: rgb(150,150,150);
margin-top: 3px;
}
Preview: