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

21
Offline

  sivastar

avatar
Punbb Rookie
Punbb Rookie
Thanks

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

22
Offline

  Virus

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

Mad

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! Smile

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

23
Offline

  Van-Helsing

avatar
★Moderator★
★Moderator★
Hello DeeW,
Are you the author of this code?


Powered by PunBB
Currently 0 users have thanked Van-Helsing for this post:

24
Offline

  Shadow

avatar
Administrator
Administrator
This thread has been updated.

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

25
Offline

  cinder75

avatar
Newbie
Newbie
nice :3

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

26
Offline

  JubileuDEV

avatar
Newbie
Newbie
Respondendo pra pegar código

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

27
Offline

  Shadow

avatar
Administrator
Administrator
[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]

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

28
Offline

  Daemon


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

Mad
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

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

29
Offline

  Van-Helsing

avatar
★Moderator★
★Moderator★
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.

Powered by PunBB
Currently 0 users have thanked Van-Helsing for this post:

30
Offline

  Daemon


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

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

31
Offline

  AlexSasan

avatar
Punbb Rookie
Punbb Rookie
thanks

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

32
Offline

  Blitzkrieg

avatar
Punbb Rookie
Punbb Rookie
Thanks mate..

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

33
Offline

  Google Bot

avatar
Newbie
Newbie
thanks

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

34
Offline

  anonim007

avatar
Punbb Rookie
Punbb Rookie
thanks

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

35
Offline

  harryumefor

avatar
Newbie
Newbie
good code

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

36
Offline

  Destroya*

avatar
Punbb Senior
Punbb Senior
noice

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

37
Offline

  smejker

avatar
Punbb Rookie
Punbb Rookie
Cool!

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

38
Offline

  sRk7

avatar
Punbb Rookie
Punbb Rookie
Nice ideea, i like your work's.

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

39
Offline

  tommycoo

avatar
Punbb Senior
Punbb Senior
thankls

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

40
Offline

  eLektronic2017x

avatar
V.I.P. Member
V.I.P. Member
Thanks

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

View previous topic View next topic Back to top Message [Page 2 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