Convert image to grayscale using CSS Filters

To start off, I just came across the image graystyle using css and found it quite interesting, so thought of a share.

This example shows how one can roll over gray style and coloured image on mouse hover magically only using CSS.

One more thing to highlight in this is, CSS Filters are part of CSS3 if I am not mistaken and might not work in the browsers not supporting CSS3, but I guess we as developers can always find alternatives.

Here is a simple code snippet to demonstrate the above example

 
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale");
    -webkit-filter: grayscale(0%);
}

svg image {
    transition: all .6s ease;
}

svg image:hover {
    opacity: 0;
}
 

You can download the demo file here

Creating a custom selector in jQuery for case insensitive search

jQuery supports a wide range of selectors out of which :contains() is a selector that returns the containers / elements that contains the given content.

This can be used to search / filter the content using jQuery.

But the :contains() selector is a case sensitive.

Let me demonstrate you the working of the :contains() selector

Case sensitive search using contains :

Apple

Mango

Banana

Grapes

Watermelon

Code used in the demo

     
$("#txtsearch").keyup(function(){
 if($.trim($(this).val()) != "")
 {
  $("div.legends").removeClass("tempselector");
  
  $("div.legends").parent().children(":contains('"+$.trim($(this).val())+"')").each(function(){
   $(this).addClass("tempselector");
  });
  
  $("div.legends.tempselector").show();
  $("div.legends:not('.tempselector')").hide();
  
  $("div.legends").removeClass("tempselector");
 }
 else
 {
  $("div.legends").show();
 }
});
     
    

Now if we want a selector which filters the contents but is case insensitive we will need a custom selector say :icontains() that searches the contents of the containter / element but the search is case insensitive.

To create the selector, I am demonstrating two options

$.extend($.expr[":"],{
 icontains: function(obj, index, meta, stack){
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
 }
});
   

OR

$.expr[':'].icontains = function(obj, index, meta, stack){
 return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};
   

Either of them will do the same work, the first one is created using $.extend and the other is a simple way to create a selector

Below stated is the demo for case insensitive searching

Case sensitive search using custom selector icontains:

Apple

Mango

Banana

Grapes

Watermelon

Code used in the demo

     
$.expr[':'].icontains = function(obj, index, meta, stack){
 return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

$("#itxtsearch").keyup(function(){
 if($.trim($(this).val()) != "")
 {
  $("div.ilegends").removeClass("itempselector");
  
  $("div.ilegends").parent().children(":icontains('"+$.trim($(this).val())+"')").each(function(){
   $(this).addClass("itempselector");
  });
  
  $("div.ilegends.itempselector").show();
  $("div.ilegends:not('.itempselector')").hide();
  
  $("div.ilegends").removeClass("itempselector");
 }
 else
 {
  $("div.ilegends").show();
 }
});
     
    

You can download the demo file here