-
.
Matter cannot be destroyed, only reassembled. You have made a fatal error human. Allow me to educate you.
- Group
- Amministratore
- Posts
- 19,254
- Location
- Seito Gekken
- Status
- Offline
Notifica Internet assente in Javascript
Controllare stato internet da web browser in javascript
Esempio: jsfiddle.net/73q3bofz
Semplice notifica di connessione assente in javascript:
Codice HTML:HTML<title>Connessione internet assente</title>
<script src="check-connection.js"></script>
<link rel=stylesheet href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div class="content">
<div>Hello World!</div>
</div>
<!--INIZIO CONNESSIONE ASSENTE-->
<div class="connessione-assente">
<div class="overlay" id="overlay">
<div class="line-1">
<span>Connessione internet assente </span>
<i class="material-icons icon-alert"></i>
</div>
<div class="line-2"><span>Riconnessione in corso </span> <img src="http://svgur.com/i/2zX.svg">
</div>
</div>
</div>
<!--FINE CONNESSIONE ASSENTE-->
</body>
Codice Javascript:CODICEwindow.addEventListener('online', netStatusIsOnline);
window.addEventListener('offline', netStatusIsOffline);
function netStatusIsOnline() {
document.getElementById("overlay").classList.remove( "offline" );
console.log("netStatusIsOnline");
}
function netStatusIsOffline() {
document.getElementById("overlay").classList.add( "offline" );
console.log("netStatusIsOffline");
}
Codice CSS:CODICE/* Internet Status */
body {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0px;
font-family: "Andale Mono", AndaleMono, monospace;
font-size: x-large;
color: rgb(23,23,23);
}
body > div {
display: flex;
height: 100%;
align-items: center;
text-align: center;
}
.content div {
margin: auto;
}
/*----------------------- connessione offline ----------------------*/
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
/*------- NON RIMUOVERE !! *** IMPORTANTE *** !! ---------*/
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
.connessione-assente .overlay {
font-family: Arial, Helvetica, sans-serif;
display: none;
opacity: 0;
visibility: hidden;
background: rgb(232, 29, 24);
box-shadow: 0 0 3px rgba(0,0,0,0.7);
color: white;
text-align: center;
font-size: xx-large;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120px;
z-index: 999;
}
.offline {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.connessione-assente .line-1 {
margin-top: 20px;
}
.connessione-assente .line-1 span {
vertical-align: top;
}
.connessione-assente .line-1 > .icon-alert {
font-size: 50px !important;
vertical-align: bottom !important;
}
.connessione-assente .line-2 span {
font-size: x-large;
vertical-align: top;
}
.connessione-assente .line-2 img {
height: 90px;
margin-top: -28px;
}
@media only screen and (max-width: 600px) {
.connessione-assente .overlay {
height: auto !important;
}
}
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
/*------- NON RIMUOVERE !! *** IMPORTANTE *** !! ---------*/
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
Edited by Ken - 17/9/2017, 09:06.