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

Get the senior executive’s handbook of important trends, tips, and strategies to compete and win in the digital economy.

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%);

Read this guide to learn everything you need to know about RPA, and how it can help you manage and automate your processes.

Topics:

Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}