I have been trying to create a javascript to detect on and offline event when a user login to their account, but am currently challenge on how to get offline event to work, since my event icon shows green even when the user is offline, in my case what is the best way to go about this ? is this issue from my script ? or html or css ?here is my script
<script>
window.addEventListener('load', function() {
var user_status = document.getElementById("user_status");
var log = document.getElementById("log");
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "status_online" : "offline";
user_status.className = condition;
user_status.innerHTML = condition.toUpperCase();
log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
}
window.addEventListener('status_online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
</script>
my css status icon styling
/* ---------------------------------- */
/* user status icon
------------------------------------- */
.user_status {
position: absolute;
content: "";
height: 14px;
width: 14px;
background-color: #c0c0c0;
bottom: 0;
right: 0;
display: block;
border: 2.5px solid #fff;
border-radius: 50%;
visibility: hidden;
}
.user_status.status_online {
background-color: #38b653;
visibility: visible;
}
Here is my html to display status icon
<div class="profiles_content">
<div class="relative uk-transition-toggle overflow-hidden">
<div uk-form-custom class="w-full py-5" >
<div class="profile_avatar">
<div class="profile_avatar_holder">
<img src="{{ profile_image }}" alt="">
</div>
<div class="user_status status_online"></div>
According to MDN page there is no status_online event, there is, however online event
Another mistake you have is there is no element with id user_status, so you'll need either add an id or use querySelector(".user_status") instead.
Also, you are trying to replace entire className with a single name, which means class name user_status will be removed from the element, however your css is depended on that name.
So in the situations like this, it's probably a better approach to use an attribute instead of class name, this way you don't have to worry about previous "status" class, this especially handy if you have more than 2 conditions.
const user_status = document.getElementById("user_status");
function updateOnlineStatus(event) {
let condition = navigator.onLine ? "online" : "offline";
//dataset is simpliest to use, it automatically adds attribute to the element
user_status.dataset.status = condition;
console.log("Event: " + event.type, " Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
updateOnlineStatus({}); //set initial status/* ---------------------------------- */
/* user status icon
------------------------------------- */
.user_status {
position: absolute;
content: "";
height: 14px;
width: 14px;
background-color: #c0c0c0;
bottom: 0;
right: 0;
display: block;
border: 2.5px solid #fff;
border-radius: 50%;
/* this kind of redundent */
/* visibility: hidden; */
}
.user_status[data-status="online"] {
background-color: #38b653;
visibility: visible;
}
/* ignore this */
.profile_avatar
{
display: inline-block;
position: relative;
}<div class="profile_avatar">
<div class="profile_avatar_holder">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj" alt="">
</div>
<div id="user_status" class="user_status"></div>
</div>