https://developer.mozilla.org/ has a wonderful script that checks whether an Internet connection exists, then gives a readout (ONLINE or OFFLINE) to inform the user. Here is the code as it works in my app.
This section goes in between the <head> tags:
<!– from https://developer.mozilla.org/En/Online%5Fand%5Foffline%5Fevents#section%5F3 –>
<script type=”text/javascript” charset=”utf-8″>
function updateOnlineStatus(msg) {
var status = document.getElementById(“status”);
var condition = navigator.onLine ? “ONLINE” : “OFFLINE”;
status.setAttribute(“class”, condition);
var state = document.getElementById(“state”);
state.innerHTML = condition;
var log = document.getElementById(“log”);
log.appendChild(document.createTextNode(“Event: ” + msg + “; status=” + condition + “\n”));
}
function loaded() {
updateOnlineStatus(“load”);
document.body.addEventListener(“offline”, function () {
updateOnlineStatus(“offline”)
}, false);
document.body.addEventListener(“online”, function () {
updateOnlineStatus(“online”)
}, false);
}
</script>
The <body> tag is changed to:
<body onload=”loaded()”>
I use this code to place the notice where I want it:
<ul class=”rounded”>
<li><span style=”font-style:strong; color:white”>The following links require an active Internet connection.</span>
<div id=”status” ><p style=”font-family:Helvetica; color:yellow;” id=”state”></p></div>
<!–<div id=”log” style=”font-family:Helvetica”></div>–></li>
</ul>
When the user visits this page and sees this area, he’ll see “ONLINE” or “OFFLINE” before clicking on any of the following Internet links.
Filed under: HTML/CSS/JS Tips, PhoneGap Tagged: Internet, Javascript Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
