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

Hello,

Maybe you can make something similiar but like youtube in case your internet is disconnected or its offline?

1 - set the message at the end of the homepage: https://prnt.sc/UkejhBeahOks (just like youtube)
1 - do the same like youtube, but change the text and the background itself: https://prnt.sc/AQCGvZj2iC3c

hi @Mihai
The code has been modified so that when the connection is lost, a red message appears with the words 'No Internet Connection'. When the connection is restored, a green message appears with the words 'Back Online'.

But not in my first post

Code:

window.addEventListener('DOMContentLoaded', function() {
  var messageElement = document.createElement('div');
  messageElement.id = 'connection-message';
  messageElement.style.cssText = `
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    z-index: 9999999999;
    display: none;
    transition: background 0.5s, color 0.5s;
  `;
  document.body.appendChild(messageElement);

  function showMessage(online) {
    if (online) {
      messageElement.innerHTML = 'Back Online';
      messageElement.style.backgroundColor = '#28a745'; // اللون الأخضر
    } else {
      messageElement.innerHTML = 'No Internet Connection';
      messageElement.style.backgroundColor = '#9f180f'; // اللون الأحمر
    }
    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', function() {
    showMessage(false);
  });
 
  window.addEventListener('online', function() {
    showMessage(true);
    setTimeout(hideMessage, 3000); // إخفاء الرسالة بعد 3 ثوانٍ
  });

  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;
    }
  `;

  var styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.innerText = `
    @keyframes slideIn { ${slideInAnimation} }
    @keyframes slideOut { ${slideOutAnimation} }
  `;
  document.head.appendChild(styleSheet);
});

كونان2000 wrote:

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

Dont work for me ,and I’ve put the new code

hi @jucarese

To test the 'Internet Disconnected' message,
you don't need to write a message in the text editor.
Simply install JavaScript, and after that, disconnect from the internet to see the message.
This should work perfectly.

It doesn't matter, its the same for the FF browser

Hmm

Strange, but it works on my test forum on all browsers

and on the main forum
https://anime.forumperso.com/

Try it on my forum

Thanks, I tried, but neither with Chrome nor with FF, I'm telling you that it has happened to me with other codes. Some that I have put yours in the SSF work fine without problems, but this one on my side does not work, I don't know if other users do. They will see it or not, but I don't. It could be something in the configuration of my browsers.
Thanks

hi @jucarese

It might be related to the settings in your browsers or possibly outdated software on your system. I recommend checking your browser settings and making sure they are updated to the latest version. Also, make sure your operating system is up to date. Sometimes, updates can resolve compatibility issues with code or programs

@كونان2000 Everything is up to date, normally JS works well for me, but this one I don't know why not.
Dont worry

jucarese wrote: @كونان2000 Everything is up to date, normally JS works well for me, but this one I don't know why not.
Dont worry

Hello @jucarese,

Can i have please an test account to detect from where the problem is coming from (if you still wanna do it)

Let me know

@Mihai
https://todasplataformas.foroactivo.com (prepod)
Forumtest
Forumtest2024

First forum is free

@jucarese
This is a screenshot of your forum.

I already told you that it doesn't work for me, and I don't know if it's because of the browsers and the security they have established + specific settings. That's why I said that if others can see it, that's perfect.

jucarese wrote: @Mihai
https://todasplataformas.foroactivo.com (prepod)
Forumtest
Forumtest2024

First forum is free

You have specified an incorrect or inactive username, or an invalid password.

In any case, try to remove your forum from prepod and try the script again - if its working that means its from prepod

Let me know

I already looked @كونان2000 , and yes, it comes up, the problem is on my side that there is something that does not allow that mess