[Javascript] Staff Online - Widget

Description:

---

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:

---

NICE TOPIC BRO

Nice,

very thanks!!!!

I'll try this, it's good and thanks.

Thanks

good job, Shadow.

Nice tutorial!

tranks bro

thanks man.

thanxs

wow that is awsosme

nice tricks

wow tnx nice code

Thanks

Thanks

thanks bro!

this is cool

looks nice thanks

Wow. Nice code, good job!

not's permited use this code...