title: Display online users as green and offline as grey using real time updates
body: <p>I want to get each post to turn green when its author goes online. I have tried to solve my coding problem for at least a week now!!! Please help me out!</p>
  
  <p>For example, if there are 3 users who posted something:</p>
  
  <p><img src="https://i.stack.imgur.com/y8MYR.jpg" alt="enter image description here"></p>
  
  <p>And user1 logs in, it will become:</p>
  
  <p><img src="https://i.stack.imgur.com/Fy39W.jpg" alt="enter image description here"></p>
  
  <p>Then say user2 logs in as well at the same time:</p>
  
  <p><img src="https://i.stack.imgur.com/U9XL9.jpg" alt="enter image description here"></p>
  
  <p>Now if user2 or user1 logs out, it goes back to grey. Everything is realtime - no refresh needed. I would like to make it so that when I open the website, I can see right away who is online and not wait the 2 seconds (in this case) to see a realtime update happen all at once.</p>
  
  <p>I also want to be able to add a dynamic link to the posts. Is there a way to insert  tag before the div that will be different depending if the user is logged in or not?</p>
  
  <p>My attempts:</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><strong>Status.php</strong></p>
  
  <pre><code>header('Content-Type: application/json');
  $array = array();
  
  $res = mysql_query("SELECT * FROM `users` WHERE `status` = 1");
  if(mysql_num_rows($res) &gt; 0){
      while($row = mysql_fetch_assoc($res)){  
          $array[] = $row['user_id'];  // this adds each online user id to the array         
      }
  }
  echo json_encode($array);
  </code></pre>
  
  <p><strong>Main page</strong></p>
  
  <pre><code>$(document).ready(function() {                               
      setInterval(function(){
          $.ajax({
              url: 'status.php',
              dataType: "json",
              type: 'GET',
              success: function(data) {
                  if (data.length &gt; 0){   // if at least 1 is online
                      $('.status').each(function(){   // loop through each of the user posts                      
                          if($.inArray(data) !== -1){     // if userid in the returned data array, set to online
                              $(this).css({background: 'green'});
                        //add a link here  
                          } else{  // if not, set to offline
                              $(this).css({background: 'grey'});
                           alert($.inArray(data)); 
                          }
                      });
                  } else {    // if no one is online, set all to offline
                      $('.status').css({background: 'grey'});
                  }           
              }
          });
      }, 2000);
  });
  </code></pre>
  
  <p><strong>CSS styling</strong></p>
  
  <pre><code>.status{ background: grey; }
  </code></pre>
  
  <p>Everything seems to start working but I cannot get the online user to go green. I tried alerting the array and I get "-1" alerted for some reason. How can I fix that?</p>
  
  <p><strong>I tried to be as clear as possible! All help is greatly appreciated!</strong></p>