These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:04 pm Advanced search

How to display online/offline status on a page

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

How to display online/offline status on a page

Postby Spawn10 » Fri Jul 30, 2010 9:39 pm

I new to this all so I apologize for any stupid questions ahead of time. Anyway, i am building an app that should be able to have some basic navigation functionality when offline. I have looked at the html5 online/offline events, and i have been able to get the pages i want to display when offline. The challenge i have is this...I also want to be able to tell when viewing the page, if it's either online or offline. Here is what the code I like look like.

Code: Select all
<!doctype html>
     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() {
       document.body.addEventListener("offline", function () {
       }, false);
       document.body.addEventListener("online", function () {
       }, false);
<body onload="loaded()">
   <div id="myid">
           table width="185" border="0" cellspacing="0" cellpadding="0">
    <td><table width="185" border="0" align="right" cellpadding="0" cellspacing="0">
        <td colspan="2" align="left" valign="top"><p class="style1">Today's FAQ:
        <td height="25" colspan="2" align="left" valign="top"><span class="style2">Q: What does the $19.95 monthly service fee cover? </span><a href="#" target="_self"><br />
        <td height="40" align="right" valign="middle" class="table-border-bottom">Click  for the answer!</td>
        <td height="40" align="right" valign="top" class="table-border-bottom"><a href="faq.html" target="_self"><img src="images/go2-button.png" alt="GO!" name="Go" width="38" height="33" border="0" id="Go" /></a></td>
        <td colspan="2" align="left" valign="top"><p class="style1">News:</style1>
        Coming Soon!
        <td width="156" height="40" align="right" valign="middle" class="table-border-bottom"><style2></style2></td>
        <td width="44" height="40" align="right" valign="top" class="table-border-bottom"><a href="#" target="_self"><img src="images/go2-button.png" alt="GO!" name="Go2" width="38" height="33" border="0" id="Go2" /></a></td>
        <td colspan="2" align="center"><p class="style1">Clients Check E-mail Here:</p>
                <a href="" target="_self" onmouseover="MM_swapImage('Go3','','images/go-rollover.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/go-button.png" alt="GO!" name="Go3" width="100" height="100" border="0" id="Go3" /></a></td>

How can i get this to have a display that shows the online status while the page is being viewed?
Thanks for your help.
Posts: 1
Joined: Fri Jul 30, 2010 9:19 pm

Re: How to display online/offline status on a page

Postby zcorpan » Thu Sep 20, 2012 8:33 am

Your code looks like it does what you want. You're only missing the elements the script tries to hook in to. Try adding this:
Code: Select all
<div id=status></div>
<div id=state></div>
<div id=log></div>

Also, I think the online and offline events get fired on window, not body, so you should do window.addEventListener. (body.ononline or <body ononline=""> handlers actually add a listener on window.)
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Return to General Discussion

Who is online

Users browsing this forum: No registered users and 1 guest