Sometimes we have required displaying the custom context menu instead of Web Browser default one.
By doing that you can set menu according to the element and you have full control over it. You can theme or design it according to your website, add actions, show only those items in the menu which requires.
If you are good at Photoshop then you can directly show text above an image by creating an image like that.
But what when you have to display text when the mouse moves over the image.
This kind of functionality basically seen in news websites or on some blogs they show the post image and title but when the user hover over one of the image then the short description about the post visible above the image.
Some website owner Blur some part of the content and ask the user to register to their website or share the article for full the whole content.
Or use Blur effect for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.
What in the tutorial ?
In this quick tutorial, I will show How you can Blur an element using jQuery.
For Blur effect I am using Foggy jQuery Plugin. It is a light-weight plugin which is easy to setup and use.
How it works
Foggy by default uses the “-webkit-filter: blur” CSS attribute.
If the browser doesn’t support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.
The .each() is use for looping in jQuery. It is similar to foreach loop in the PHP which loops until it gets data.
It works with an Array, Object, and jQuery selector, and you don’t have the need to know how many data are available it performs iteration continuously until it getting data that makes it differ from other looping methods.
While iteration it also keeps tracking the element index.
What it’s required?
It mainly requires when you want to perform an action on all child elements or find the collection of elements which have given class, etc.
There are many other cases where you can use this.