[Javascript] Staff Online - Widget

First topic message reminder :

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:

---

Thanks

DeeW. wrote:[link="/t658p15-javascript-staff-online-widget#4534"]not's permited use this code...

Now that you have replied to the topic you can see the codes to the first post. Everyone is permitted to use these codes, as soon as they reply to the topic!

Hello DeeW,
Are you the author of this code?

This thread has been updated.

nice :3

Respondendo pra pegar código

[alerta="Language not English"]Hello @JubileuDEV

All publicly displayed messages are only limited to English. This includes posts, titles, signatures, profiles and other forms of public display.[/alerta]

DeeW. wrote:[link="/t658p15-javascript-staff-online-widget#4534"]not's permited use this code...

It's okay. I allowed that they would use the old code.

@Edit

Who made this change in the code?
Did not have any change. This way of adding localStorage is incorrect.
On the console the value of the widget is not saved, so the effect remains the same. O_o

Hello,
I have made this modification with the local storage, have you a screenshot of console? I think the result is the same except it saves the avatar and details in local storage every five minutes to reduce the number of fires on javascript port, so we can update it if its necessary.

In my forum I use the storage in the new code that I did. When he goes into action ... It is saved on the console, then when the page is loaded, the code does not need to be loaded again.

See the result in my forum:


In my old code the storage had also been used incorrectly.

thanks

Thanks mate..

thanks

thanks

good code

noice

Cool!

Nice ideea, i like your work's.

thankls

Thanks