The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Staff Widget Issue

3 posters

Go down

Solved Staff Widget Issue

Post by Valoish 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
Valoish
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 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://2img.net/s/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>
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish 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
Valoish
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 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.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

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

@Daemon; Sent you a PM with acc info c:
Valoish
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 July 18th 2017, 5:23 pm

Done! Wink
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

Solved Re: Staff Widget Issue

Post by Valoish 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
Valoish
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 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
Valoish
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 July 19th 2017, 7:03 pm

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


Staff Widget Issue Left1212Staff Widget Issue Center11Staff Widget Issue Right112
Staff Widget Issue Ape_b110
Staff Widget Issue Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19435
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top

- Similar topics

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