27 users online (1 members and 26 guests)  


  Results 1 to 2 of 2

Related

  1. Css text color    Forum: CSS Forum
    Replies: 2
  2. How do I change the browser frame color?    Forum: Javascript Forum
    Replies: 7
  3. Change color of only one link    Forum: CSS Forum
    Replies: 3
  4. Replies: 2
  5. Replies: 5
  1. #1
    Spawn10's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    1

    how do I change text color?

    I am new to css so please patience...I am trying to write a css code which would give a particular text 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;

    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

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: how do I change text color?

    Hi there Spawn10,

    and a warm welcome to these forums.

    You have "case" differences - javascript "ONLINE" and CSS "online", javascript "OFFLINE" and CSS "offline".

    There are two solutions, either change the CSS to match the javascript or add the highlighted here...
    Code:
    
       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
       status.setAttribute("class", condition.toLowerCase());