The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff Widget Issue

View previous topic View next topic Go down

Solved Staff Widget Issue

Post by Valoish on July 17th 2017, 6:17 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : http://prntscr.com/fwsn40
Who the problem concerns : All members
When the problem appeared : Today
Forum link : http://www.canvastutorials.org/

Description of problem

So I used the following code on my forum:
Code:
<ul id="staff_widget">
</ul><script type="text/javascript">
/*
 *  Código: Widget staff online
 *  Criado no dia: 18/07/2014
 *  Última atualização: 15/07/2017
 *  Feito por: Daemon
 *  Não distribuir, ou remover os créditos do autor
 */
jQuery(document).on("ready", function() {
  var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
  storedValue = sessionStorage.getItem("online_staff");
  (storedValue) ? staffWidget.html(storedValue) : staffOnline();
 
  setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
  }, 180000); // staffOnline function, reload every 3 minutes
 
  function staffOnline() {
      var staff = {
        "Administrator": "4C94FF",
        "Community Manager": "00F0AC",
        "Content Coordinator": "E38800"
      };
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
            staffWidget.html("Loading...");
        },
        success: function(data) {
            staffWidget.html("");
            var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
            var staffColor;
            jQuery.each(staff, function(group, color) {
              staffColor = table.find("span[style*='" + color + "']");
              if (staffColor.length) {
                  var elStaff, userLink, userId, avatarSrc;
                  staffColor.each(function() {
                    elStaff = jQuery(this).parent().prop("outerHTML");
                    userLink = jQuery(elStaff).attr("href");
                    userId = userLink.split("/u")[1];
                    jQuery.get(userLink, function(e) {
                        avatarSrc = jQuery("#profile-advanced-right .module:eq(0) img:eq(0), .forumline td.row1.gensmall:first img:eq(0)", e).attr("src"); // PunBB, PHPBB3, Invision, PHPBB2
                        staffWidget.append(
                        "<li class='online_staff clearfix'>" +
                        "  <div class='div-icon-staff'>" +
                        "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                        "  </div>" +
                        "  <div class='div-main-staff'>" +
                        "    <div class='staff-name'>" + elStaff + "</div>" +
                        "    <p class='staff-rank'>" + group + "</p>" +
                        "  </div>" +
                        "</li>"
                        );
                        sessionStorage.setItem("online_staff", staffWidget.html());
                    });
                  });
              }
            });
        },
        error: function(jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
      });
  }
});
</script><style type="text/css">
ul#staff_widget { margin-left: 0!important; padding-left: 0!important; }

#staff_widget:empty:before {
    content: "There is no staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding: 0 3px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 0 3px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
  border-radius: 100%;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 100%;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}

#left td.catLeft {
    border-bottom: solid 1px #2f2f2f;
    box-shadow: 0 1px 0 #0e0e0e;
    text-transform: uppercase; }

.module-title { text-align: left; }
</style>
Can be found here

Everything works fine and I managed to alter the styling to my liking, but for some reason it shows the Staff name as "Valoish" for 2 different users.. (Refer to screenshot).
The user with the mint coloered picture should be "Pantone" and the pink colored picture should be "Valoish"

I'm assuming the issue is coming from this line in the coding
Code:
                        "    <div class='staff-name'>" + elStaff + "</div>" +
but I don't know how to fix it x_x


Last edited by Valoish on July 18th 2017, 7:51 pm; edited 1 time in total
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Staff Widget Issue

Post by Daemon on July 17th 2017, 9:37 pm

I see the problem... try it now:
Code:
<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.217072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {

    function staffOnline() {

        var staff = [
            {group: "Administrator", color: "4C94FF"},
            {group: "Community Manager", color: "00F0AC"},
            {group: "Content Coordinator", color: "E38800"}
        ];

        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);

        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");

                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, xhr2, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;

                            xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);

                            xhr2.onload = function() {
                                 if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.getElementsByClassName("module")[0].getElementsByTagName("img")[0].src;
                                    elLi =
                                    "<li class='online_staff clearfix'>" +
                                    "  <div class='div-icon-staff'>" +
                                    "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                                    "  </div>" +
                                    "  <div class='div-main-staff'>" +
                                    "    <div class='staff-mp'><a href='/privmsg?mode=post&u=" + stafferId + "'><img src='https://hitsk.in/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };

                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };

                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };

        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };

        xhr1.send();
    }

    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>
avatar
Daemon
Forumember

Posts : 51
Reputation : 31
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish on July 18th 2017, 3:11 am

@Daemon, thanks for the help but now it just constantly keeps saying no staff online ; A;
I refreshed the page like 50 times and waited a few mins before trying again and it still wouldnt update.. I also tried to change the update time from 180000 to 10000 and 1000 and neither worked x_x
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Staff Widget Issue

Post by Daemon on July 18th 2017, 6:14 am

The code was tested on all versions and worked perfectly. If you allow me to access your forum for testing, contact me by private message.
avatar
Daemon
Forumember

Posts : 51
Reputation : 31
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish on July 18th 2017, 4:34 pm

@Daemon; Sent you a PM with acc info c:
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Staff Widget Issue

Post by Daemon on July 18th 2017, 5:23 pm

Done! Wink
avatar
Daemon
Forumember

Posts : 51
Reputation : 31
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish on July 18th 2017, 5:59 pm

Thank you so much~! :3

Please don't lock this topic just yet in case something glitches again xD
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish on July 18th 2017, 6:38 pm

@Daemon, one last question; How can I remove this icon from the widget? I already removed the CSS and the HTML div from the code but the envelope still appears ><

All good now~  thumleft
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Staff Widget Issue

Post by APE on July 19th 2017, 7:03 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Manager
Manager

Male Posts : 11033
Reputation : 1036
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


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