Blur effect on the element via Foggy jQuery Plugin

Some website owners Blur some parts of the content and ask the user to register to their website or share the article for full access to the content.

Blur effect can be used for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.

For the blur effect, I am using the Foggy jQuery plugin. It is lightweight and easy to set up.

In this tutorial, I show how you can use the Foggy jQuery plugin to blur the HTML content on mouse hover.

Blur effect on the element via Foggy jQuery Plugin

Read more

How to Use jQuery Each to Iterate Through Arrays Objects and Selectors

jQuery revolutionized web development with its simplicity and powerful features. Among them is the “jquery foreach” loop, enabled by the `$.each()` method.

This article explores how this method efficiently iterates through arrays, objects, and selectors. Gone are the days of cumbersome loops and complex constructs. With the “jquery foreach” loop, you can effortlessly navigate collections, significantly reducing development time.

Whether you’re a seasoned developer or a beginner, this article equips you with the knowledge to master the `$.each()` method and unleash its full potential.

Let’s dive into the world of jQuery iteration and elevate your web development skills with the “jquery foreach” loop.

How to Use jQuery Each to Iterate Through Arrays Objects and Selectors

Read more

Show and Hide Password Field Text with jQuery and JavaScript

Password field by default doesn’t show any visible text other than the symbol.

Some websites allow the user to view the hidden text in the password field by toggling.

For this, they provide an element e.g. checkbox or a button when it gets clicked then the password element value is been visible on the screen and reset to default view when it again gets clicked.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

Show and Hide Password Field Text with jQuery and JavaScript

Read more

How to check Broken Image with jQuery and AJAX

The images which are wouldn’t successfully load on the web page will show nothing when the source does not exist.

It looks bad when there are many images and some of them are missing.

For solving this you need to look through all the pages and find the broken images and fix them manually time to time. It is a time-consuming process.

In this tutorial, I will show you two examples, to automatically detect the broken images and replace with another image.

  • In the first one, I am using the jQuery, and
  • In the second, using AJAX with jQuery

How to check Broken Image with jQuery and AJAX

Read more