Home
Welcome everyone
Add a message when you disconnect from the Internet
The message appears as soon as the Internet connection is suddenly lost, and the message disappears once the Internet connection is restored
The connection may be lost before you finish writing the post in the editor, and the submit button may be pressed without knowing that the connection has been lost.
So it might be useful to display a message to members if they lose their internet connection
----
Installing the JavaScript
--------------------------
Title : as you like
Placement : In all the pages
- Code:
window.addEventListener('DOMContentLoaded', function() {
var messageElement = document.createElement('div');
messageElement.id = 'connection-message';
messageElement.innerHTML = 'The Internet connection has been disconnected';
messageElement.style.cssText = `
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #9f180f;
color: #fffdeb;
font-size: 24px;
font-weight: bold;
padding: 10px;
text-align: center;
z-index: 9999;
display: none;
`;
document.body.appendChild(messageElement);
function showMessage() {
messageElement.style.display = 'block';
messageElement.style.animation = 'slideIn 0.5s ease-in-out';
}
function hideMessage() {
messageElement.style.animation = 'slideOut 0.5s ease-in-out';
setTimeout(function() {
messageElement.style.display = 'none';
}, 500);
}
window.addEventListener('offline', showMessage);
window.addEventListener('online', hideMessage);
function animate(element, animationName) {
element.style.animationName = animationName;
setTimeout(function() {
element.style.animationName = '';
}, 1000);
}
var slideInAnimation = `
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`;
var slideOutAnimation = `
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
`;
messageElement.addEventListener('animationstart', function() {
if (messageElement.style.animationName === slideInAnimation) {
animate(messageElement, slideOutAnimation);
}
});
});
You can modify the message content, background and color from the JavaScript code
Last edited by كونان2000 on Tue 17 Sep 2024 - 5:35; edited 2 times in total
