The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add a message when you disconnect from the Internet

5 posters

Go down

Add a message when you disconnect from the Internet Empty Add a message when you disconnect from the Internet

Post by كونان2000 June 6th 2024, 7:15 am

Welcome everyone
Add a message when you disconnect from the Internet
Add a message when you disconnect from the Internet Animat16

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
----



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




___________________________________________
banana
Add a message when you disconnect from the Internet 360_f_10
كونان2000
كونان2000
Forumember

Male Posts : 213
Reputation : 99
Language : Arabic

https://anime.forumperso.com/

skouliki, invisible_fa, YoshiGM, SarkZKalie, TonnyKamper, jucarese, poesia-verses and Wizzard like this post

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by Wizzard June 6th 2024, 10:03 am

Interesting idea, I love it.
Wizzard
Wizzard
Forumember

Male Posts : 34
Reputation : 6
Language : English

كونان2000 likes this post

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by jucarese June 6th 2024, 11:49 am

jucarese
jucarese
Hyperactive

Male Posts : 2471
Reputation : 117
Language : spanish
Location : SSF Admin

http://asistencia.foroactivo.com/u23082

كونان2000 likes this post

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by كونان2000 June 7th 2024, 4:56 am

Wizzard wrote:Interesting idea, I love it.
thank you @Wizzard
I'm glad you liked it Add a message when you disconnect from the Internet 45133
-----------------------------------

hello @jucarese

The message appears before you click the send button Very Happy

+

Check your Java settings

Add a message when you disconnect from the Internet Oci5a_10

Add a message when you disconnect from the Internet Ocia_a20
كونان2000
كونان2000
Forumember

Male Posts : 213
Reputation : 99
Language : Arabic

https://anime.forumperso.com/

poesia-verses and Wizzard like this post

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by YoshiGM June 7th 2024, 5:00 pm

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
YoshiGM
YoshiGM
Active Poster

Male Posts : 1506
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

poesia-verses and كونان2000 like this post

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by كونان2000 June 8th 2024, 7:04 am

Haha, glad you find it creative! Very Happy
it could save us from those frustrating moments.
Thanks @YoshiGM for the Your comment ^^,
كونان2000
كونان2000
Forumember

Male Posts : 213
Reputation : 99
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Add a message when you disconnect from the Internet Empty Re: Add a message when you disconnect from the Internet

Post by skouliki June 8th 2024, 7:26 am

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
skouliki
skouliki
Manager
Manager

Female Posts : 15246
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper and كونان2000 like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum