Πως μπορώ να φτιάξω το Staff Online Widget?

Καλημέρα παιδιά,
Γνωρίζει κανείς πως μπορώ να φτιάξω ενα Staff Online Widget όπως στην εικόνα εδώ http://prntscr.com/4p3bl4 ? Το Staff widget θέλω να εμφανίζει το Avatar το όνομα του μέλους του Staff και την κατάσταση του (πεδίο προφίλ).

Με φιλικούς χαιρετισμούς,
Dark-Avenger

Σου έφτιαξα αυτό που ήθελες απλά να ξέρεις ότι χρησιμοποιεί την μέθοδο ajax και έτσι μπορεί να έχεις τα κλασσικά θέματα.



Όλος ο κώδικας θα μπει σε widget.

Κώδικας:

<div id="Staff_Online">
</div>
 <script type="text/javascript">
    jQuery(document).ready(function () {
        var widget = jQuery('#Staff_Online')[0];
    storedValue = sessionStorage.getItem('Online_Staff');
        if (storedValue) {
            jQuery(widget).html(storedValue)
        } else {
            jQuery.get('/viewonline', function (data) {
                var group = {

                    adm: jQuery('.table span[style="color:#000099"]', data).parents('td'),

                    coadm: jQuery('.table span[style="color:#"]', data).parents('td'),

                  mod: jQuery('.table span[style="color:#"]', data).parents('td'),
                    };
            jQuery(widget).append(group.adm).append(group.coadm).append(group.mod);
                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_id-9 dd div:eq(0)')
                })
            });
            jQuery(window).on('load', function () {
                var currentValue = document.getElementById(widget).innerHTML;
                sessionStorage.setItem('Online_Staff', currentValue)
            })
        }
    });
    </script> <style>
  #Staff_Online .avatarimage > img {
    float: left;
    margin-right: 4px;
    width: 40px;
    height: 40px;
}
#Staff_Online .Info {
    color: #f00;
    margin: 10px 45px;
}
</style>   

Κώδικας:

Εδώ δές κάποιες χρήσιμες πληροφορίες που θα σε βοηθήσουν...

Εδώ βάζεις το χρώμα σας admin
                    adm: jQuery('.table span[style="color:#000099"]', data).parents('td'),
Εδώ βάζεις το χρώμα του δεύτερου admin admin
                    coadm: jQuery('.table span[style="color:#"]', data).parents('td'),
Εδώ βάζεις το χρώμα του mod
                    mod: jQuery('.table span[style="color:#"]', data).parents('td'),
                    };
               

Κώδικας:

Εδώ βάζεις την πληροφορία που θέλεις να εμφανίζεται από το προφίλ, όπου #field_id-9 το αλλαζείς σε #field_id-1, #field_id-2 κτλ
                    jQuery(this).next().load(prof + ' #field_id-9 dd div:eq(0)')

Καλησπέρα Παύλο,
Δεν μου δέχεται σωστά την αλλαγή γραμμής μου το εμφανίζει έτσι http://prntscr.com/4pdcae

Κώδικας:


#Staff_Online td {
    display: inline-block;
    padding: 3px;
}

Επίσης μπορεις να ελαφρύνεις λίγο τον κωδικό σου με τον παρακάτω...

Κώδικας:

       
<div id="Staff_Online">
                
</div>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                var widget = jQuery('#Staff_Online')[0];
            storedValue = sessionStorage.getItem('Online_Staff');
                if (storedValue) {
                    jQuery(widget).html(storedValue)
                } else {
                    jQuery.get('/viewonline', function (data) {
                        var group = {
       
                            adm: jQuery('.table span[style="color:#000099"]', data).parents('td'),
       
                            coadm: jQuery('.table span[style="color:#"]', data).parents('td'),
       
                          mod: jQuery('.table span[style="color:#"]', data).parents('td'),
                            };
                    jQuery(widget).append(group.adm).append(group.coadm).append(group.mod);
                        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(window).on('load', function () {
                        var currentValue = document.getElementById(widget).innerHTML;
                        sessionStorage.setItem('Online_Staff', currentValue)
                    })
                }
            });
            </script> <style>
#Staff_Online td {
    display: inline-block;
    padding: 3px;
}
#Staff_Online .avatarimage > img {
    float: left;
    height: 40px;
    margin-right: 4px;
    width: 40px;
}
#Staff_Online td.tcl a span strong {
    margin: 10px 0px;
    display: inline-block;
}

        </style> 

Άλλωστε εσένα σε νοιάζει να βλέπουν τα μέλη ή συντονιστές σου ότι είσαι online όχι τις ασχολίες σου κτλ...

Καλημέρα Παύλο,
Πιστεύω πως πρέπει να τροποποιηθεί το js έτσι ώστε να ενημερώνετε η local cache storage πχ μετά απο 3 ώρες ώστε να αποφεύγονται τα πολλά .load functions τουλάχιστον όσων αφορά τη λήψη του avatar και της κατάστασης για να μην γίνονται πολλά fires στο port. Στην f/m είχαν κάνει κάτι παρόμοιο για το avatar στο board index. Γίνετε να τροποποιήσουμε έτσι και αυτό το js?

Και αυτό να γίνει πάλι πρόβλημα θα έχεις σε υψηλή επίσκεψη και συνεχόμενη ανανέωση (κλικ) σε links της σελίδας.Η καλύτερη λύση είναι αυτή που αναφέρω σε ένα άλλο θέμα εδώ.

Καλησπέρα Παύλο,
Οκ τροποποιήσα το javascript ώστε η local storage να ενημερώνεται μετά απο 5 λεπτά. Προς στιγμή δεν φαίνετε να παρουσιάζει πρόβλημα γιατί έχω αφαιρέσει πολλά τα javascripts που έχουν .get() και .load().
Τώρα αν το πάω σε εξωτερικό server της f/m θα αντιμετωπίζω πάλι προβλήματα με τα requests? πχ αν το πάω σε .com domain.

Οκ εσύ ξέρεις.Θα πρέπει να ρωτήσεις γιατί έχω την εντύπωση πως χάνεις τα πάντα σε μια τέτοια κίνηση...

Αυτή την στιγμή μπορεί να δημιουργήσει πρόβλημα στη βάση του φόρουμ(είναι σε forumgreek domain)?

Αυτό θα το ρωτήσεις στη Forumotion από όσο γνωρίζω σε τέτοια κίνηση θα σβηστούν όλα!Αλλά καλύτερα ρώτα στη Forumotion...

Ok Παύλο,
Μπορείς να κλειδώσεις το θέμα. Σε ευχαριστώ.