Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using a Grayscale Image to Indicate User is Offline

DZone's Guide to

Using a Grayscale Image to Indicate User is Offline

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

You may have noticed webapps images in Chrome going grayscale to indicate that the network is down. A simple demonstration of the same concept is shown here.

This can be done with a very simple HTML5 event and CSS3 trick. Some time back I had blogged about HTML5+JS offline/online notification. On the same lines, I have done some silly code to emulate the offline gray-scaling of images, check out 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 = "";
});

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

Update 1:

There were a few comments on 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%);

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}