Using a Grayscale Image to Indicate User is Offline
Join the DZone community and get the full member experience.
Join For FreeYou 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%);
Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments