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

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

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

Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}