Add a message when you disconnect from the Internet
5 posters
Page 1 of 1
Add a message when you disconnect from the Internet
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
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
----
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
![Add a message when you disconnect from the Internet Animat14](https://i.servimg.com/u/f30/20/35/61/89/animat14.gif)
skouliki, invisible_fa, YoshiGM, SarkZKalie, TonnyKamper, jucarese, poesia-verses and Wizzard like this post
Wizzard- Forumember
-
Posts : 31
Reputation : 6
Language : English
كونان2000 likes this post
Re: Add a message when you disconnect from the Internet
poesia-verses and Wizzard like this post
Re: Add a message when you disconnect from the Internet
Lol? I've never though in something like that.
A message alert when you are replying a topic and your connection has lost.
Very creative :p
A message alert when you are replying a topic and your connection has lost.
Very creative :p
poesia-verses and كونان2000 like this post
Re: Add a message when you disconnect from the Internet
Haha, glad you find it creative!
it could save us from those frustrating moments.
Thanks @YoshiGM for the Your comment ^^,
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
it could save us from those frustrating moments.
Thanks @YoshiGM for the Your comment ^^,
Re: Add a message when you disconnect from the Internet
YoshiGM wrote:Lol? I've never though in something like that.
A message alert when you are replying a topic and your connection has lost.
Very creative :p
i also have a similar code in my forum that automatically saves the post in case of internet crash
TonnyKamper and كونان2000 like this post
![-](https://2img.net/i/empty.gif)
» Chatbox Auto-Disconnect
» The Internet Roadhouse
» Chatbox 'consuming' internet.
» Internet explorer view
» Can we trust Internet sources?
» The Internet Roadhouse
» Chatbox 'consuming' internet.
» Internet explorer view
» Can we trust Internet sources?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum