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

Interesting idea, I love it.

@كونان2000 Dont work for me

https://todasplataformas.foroactivo.com

Wizzard wrote:Interesting idea, I love it.

thank you @Wizzard
I'm glad you liked it
-----------------------------------

jucarese wrote: @كونان2000 Dont work for me
https://todasplataformas.foroactivo.com

hello @jucarese

The message appears before you click the send button

+

Check your Java settings

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

Haha, glad you find it creative!
it could save us from those frustrating moments.
Thanks @YoshiGM for the Your comment ^^,

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