No replies
Spawn10
Spawn10's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2010-05-26
Posts: 6
Points: 11

I am trying to write a css code which would give a page a different look when the page is online, versus when it's offline. I think I have a code that should work, but it really isn't behaving the way i want it to...here is all of my code;

 <!doctype html>
 <html>
 <head>
   <script>
     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>
   <style>
#status { 
	height:20px; text-align:right;
     }
#status.online { 
	color:green; 
     }
#status.offline { color:red; }
#log { background:yellow; border:2px solid black; white-space:pre; max-height:200px; overflow:auto; }
 
  </style>
 </head>
 <body onload="loaded()">
   <div id="status"><p id="state"></p></div>
   <div id="log"></div>
 </body>
 </html>

The whole idea here is that the page will indicate that the user is online (green text) and when the user is offline (red text)....located at the top right hand corner of the page. Everything else works, except for the text changing color of course...any idea as to what am doing wrong here?
Thanks