Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Staff Online - Widget



Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

View previous topic View next topic Go down Message [Page 5 of 7]

1
Offline

  Shadow

avatar
Administrator
Administrator
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.)


- 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.




- 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:



Powered by PunBB
Currently 0 users have thanked Shadow for this post:

81
Offline

  paskaandika

avatar
Punbb Rookie
Punbb Rookie
thanks Smile

Powered by PunBB
Currently 0 users have thanked paskaandika for this post:

82
Offline

  pedros

avatar
Punbb Rookie
Punbb Rookie
Thank you very much!

Powered by PunBB
Currently 0 users have thanked pedros for this post:

83
Offline

  Lord3000

avatar
Punbb Rookie
Punbb Rookie
thanks

Powered by PunBB
Currently 0 users have thanked Lord3000 for this post:

84
Offline

  CaffeinatedThought

avatar
Newbie
Newbie
Awesome, I am going to test this one out today!

Powered by PunBB
Currently 0 users have thanked CaffeinatedThought for this post:

85
Offline

  Tiger000

avatar
Newbie
Newbie
nice Wink

Powered by PunBB
Currently 0 users have thanked Tiger000 for this post:

86
Offline

  noissecontrol

avatar
Newbie
Newbie
nice one

Powered by PunBB
Currently 0 users have thanked noissecontrol for this post:

87
Offline

  kimmywee

avatar
Newbie
Newbie
Cool

Powered by PunBB
Currently 0 users have thanked kimmywee for this post:

88
Offline

  roseila

avatar
Punbb Rookie
Punbb Rookie
cool

Powered by PunBB
Currently 0 users have thanked roseila for this post:

89
Offline

  Caaw_SwaGeRs

avatar
Newbie
Newbie
GOOD WOW

Powered by PunBB
Currently 0 users have thanked Caaw_SwaGeRs for this post:

90
Offline

  JuMperr

avatar
Newbie
Newbie
nice

Powered by PunBB
Currently 0 users have thanked JuMperr for this post:

91
Offline

  Msuic

avatar
Newbie
Newbie
Good Job!

Powered by PunBB
Currently 0 users have thanked Msuic for this post:

92
Offline

  Stallmp

avatar
Newbie
Newbie
Nice!

Powered by PunBB
Currently 0 users have thanked Stallmp for this post:

93
Offline

  Andrei34

avatar
Punbb Rookie
Punbb Rookie
Thanks, man!

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

94
Offline

  Joost

avatar
Newbie
Newbie
Nice, well done! Very Happy

Powered by PunBB
Currently 0 users have thanked Joost for this post:

95
Offline

  redlover

avatar
Punbb Rookie
Punbb Rookie
Nice bro

Powered by PunBB
Currently 0 users have thanked redlover for this post:

96
Offline

  BSG*

avatar
Newbie
Newbie
Cool cond and tutorial, good job.

Powered by PunBB
Currently 0 users have thanked BSG* for this post:

97
Offline

  hozaifa01

avatar
Newbie
Newbie
cooool

Powered by PunBB
Currently 0 users have thanked hozaifa01 for this post:

98
Offline

  vtnlinh

avatar
Newbie
Newbie
thanks Very Happy

Powered by PunBB
Currently 0 users have thanked vtnlinh for this post:

99
Offline

  Serah

avatar
V.I.P. Member
V.I.P. Member
Thank you sooo much ♥o♥

Powered by PunBB
Currently 0 users have thanked Serah for this post:

100
Offline

  the-rock

avatar
Newbie
Newbie
Thanks..

Powered by PunBB
Currently 0 users have thanked the-rock for this post:

101
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 5 of 7]


Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

Topic URL's

URL
BBcode
HTML

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