Based on internet connection change color of button to green or grey

Question

I want the button itself to change its color when online(based on internet connection) to green otherwise gray.

I have a JS fiddle which gives a solution to click the button and we can see if we are online/offline by an alert.

Can someone please help

HTML:

<div data-role="page" id="index">
  <div data-theme="a" data-role="header">
    <h3>First Page</h3> <a href="#second" class="ui-btn-right">Next</a> </div>
  <div data-role="content"> <a data-role="button" id="check-connection">Check internet connection</a> </div>
</div>

jQuery:

$(document).on('pagebeforeshow', '#index', function() {
  $(document).on('click', '#check-connection', function() {
    var status = navigator.onLine ? 'online' : 'offline';
    (alert(status));
  });
});

See JSFiddle.

Answer 1

Here is the working fiddle: http://jsfiddle.net/dn7zjm41/

I just added an if statement:

if(status==="online") {
  $("#check-connection > span").css("background-color", "green");
} else if(status==="offline") {
  $("#check-connection > span").css("background-color", "gray");
} else {
  // the code for another scenario
}

And if you want an automatic run without click event - here it is: http://jsfiddle.net/f6paa9xy/

In this case your Javascript should look like this:

$(document).on('pagebeforeshow', '#index', function() {             
  var status = navigator.onLine ? 'online' : 'offline';
  alert(status);
  if(status==="online") {
    $("#check-connection > span").css("background-color", "green");
  } else if(status==="offline") {
    $("#check-connection > span").css("background-color", "red");
  }
});

Hope it helps

Answer 2

You could use a simple css class to do this:

$(document).on('click', '#check-connection', function(){
    var status = navigator.onLine ? 'online' : 'offline';
    this.className = 'status-'+status;
});

.status-online{ background-color: green; }
.status-offline{ background-color: grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content">
    <a data-role="button" id="check-connection">
      Check internet connection
  </a>
</div>

However, if you want a live determination, you can use an event listener provided by the browser, most support this (ie8+ for example):

window.addEventListener("offline", function() { 
    $("#check-connection")[0].className = "status-offline"; 
});
window.addEventListener("online", function() { 
    $("#check-connection")[0].className = "status-online"; 
});

More on this at MDN: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine