Grayscale image when user offline

Submitted by hemanth on Mon, 01/07/2013 - 19:41

You must have noticed, webapps images in chrome going grayscale to indicate that the network is down, a simple demonstration of the same is been done here.

The trick is with very simple HTML5 event and CSS3 trick, sometime back had blogged about HTML5+JS offline/online notification on the same lines have done some silly code to emulate the offline gray-scaling of images, checkout the demo .

Here is the code :

// CSS grayscale 
  -webkit-filter: grayscale(100%); // Latest webkit
  -moz-filter: grayscale(100%); // Mozilla
  -ms-filter: grayscale(100%);  // M$
  -webkit-filter: grayscale(1); // Old webkit
  filter: grayscale(100%);        // Current API
 
 
//Javascript to change the class
window.addEventListener('offline', function (evt) {
  console.log("offline");
  document.getElementById('test').className = "offline";
});
window.addEventListener('online', function (evt) {
  document.getElementById('test').className = "";
});

Can also use : document.getElementById('id').classList.toggle('class'); to toggle classes :)

Update 1:

There were few comments in reddit saying this is not working on FF, the fix is as below :

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);

Share this