Staff Widget Issue
3 posters
Page 1 of 1
Staff Widget Issue
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>
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>" +
Last edited by Valoish on July 18th 2017, 7:51 pm; edited 1 time in total
Re: Staff Widget Issue
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- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: Staff Widget Issue
@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
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
Re: Staff Widget Issue
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- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: Staff Widget Issue
Thank you so much~! :3
Please don't lock this topic just yet in case something glitches again xD
Please don't lock this topic just yet in case something glitches again xD
Re: Staff Widget Issue
Problem solved & topic archived.
|
Similar topics
» Staff Widget Coding Help?
» Who are the staff Widget?
» help with staff widget
» Staff online widget help.
» Staff Widget Problems?!
» Who are the staff Widget?
» help with staff widget
» Staff online widget help.
» Staff Widget Problems?!
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum