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

41
Offline

  Daemon


Punbb Rookie
Punbb Rookie
Daemon wrote: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.
The code continues with the same errors . There's no difference between the two. scratch

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

42
Offline

  Ros Joshua Recto

avatar
Newbie
Newbie
THANKSSS ! Very Happy

Powered by PunBB
Currently 0 users have thanked Ros Joshua Recto for this post:

43
Offline

  pnamks

avatar
Newbie
Newbie
Thank !!

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

44
Offline

  Boyka

avatar
Punbb Rookie
Punbb Rookie
would love to test it

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

45
Offline

  Ionutz

avatar
Punbb Rookie
Punbb Rookie
best tutorials

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

46
Offline

  Boyka

avatar
Punbb Rookie
Punbb Rookie
is it for phpbb2 do?

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

47
Offline

  schiggysboard

avatar
Newbie
Newbie
cool

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

48
Offline

  djdancy

avatar
Newbie
Newbie
hmmm tare

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

49
Offline

  zenitri

avatar
Newbie
Newbie
does this still work

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

50
Offline

  Virus

avatar
★Moderator★
★Moderator★
Yes of course it is working. Try it and if you have any questions open a new topic to Questions & Problems forum.

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

51
Offline

  Lord3000

avatar
Punbb Rookie
Punbb Rookie
nice

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

52
Offline

  aEEk.#

avatar
Punbb Rookie
Punbb Rookie
thanks !

Powered by PunBB
Currently 0 users have thanked aEEk.# for this post:

53
Offline

  fascicularia

avatar
Newbie
Newbie
Very nice

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

54
Offline

  xAlecsu

avatar
Newbie
Newbie
Rapid wrote:


Tutorial: Staff Online - Widget

Advanced script, which will show the possibilities on Forumotion.




--> Tutorials, tips and tricks <--
Staff Online - Widget


Alternative code by @Dark-Avenger (Browser storage)


Feel free to ask questions regarding this new version.
** You must reply to see a hidden content**


Code by @Daemon (.Load() function, this code is unstable.)



** You must reply to see a hidden content**


- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Staff Online - Widget

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

55
Offline

  FrOsTyXi

avatar
V.I.P. Member
V.I.P. Member
Thank you sir!

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

56
Offline

  AlexSasan

avatar
Punbb Rookie
Punbb Rookie
thanks

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

57
Offline

  -ExP[3R]TuL-

avatar
Punbb Rookie
Punbb Rookie
good job

Powered by PunBB
Currently 0 users have thanked -ExP[3R]TuL- for this post:

58
Offline

  Arber

avatar
Punbb Rookie
Punbb Rookie
nice

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

59
Offline

  Nickname1

avatar
Punbb Rookie
Punbb Rookie
Nice! Smile

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

60
Offline

  zzlasperpen

avatar
Newbie
Newbie
xemmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

61
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 3 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