Category: Jquery

In this post, I show how you can add and remove new element within your web page with jQuery.

There are two approaches for doing this –

  • Pre-made all elements
  • Dynamically create new element

The first case is easy but you have to create all of the element at once and hide them which is not required currently.

When you have to add an element you need to display the element one by one and for removing hide them.

Here the problem is – there are multiple unused elements are available which occupies space within your code and makes it messy even if you don’t have needed some of the elements.

The second solution is better than the first here you create and remove an element dynamically when you have to require.

In the demonstration, I am using the second solution.

Dynamically add and remove element with jQuery

Jquery

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.

Blur effect on the element via Foggy jQuery Plugin

Jquery

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.

How to use the .each() function in jQuery

Jquery

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 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 article, I show How you can implement this functionality with jQuery and JavaScript.

show and hide Password field text with jQuery and JavaScript

Javascript Jquery

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 the time-consuming process.

In this tutorial, I will show you with 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

 

AJAX Jquery

There are many cases when require to update certain part of the web page on the regular basis.

For example – showing live cricket or football score, display latest news feeds,etc.

There are two ways to send AJAX request on specified time –

  • By setInterval() and
  • By setTimeout() JavaScript functions.

Both do the same work but they are reliable for certain cases, which I discuss in this tutorial.

How to fire AJAX Request on Regular Interval

AJAX Jquery PHP

Alert is one of the most used functions in the JavaScript. By this, we interact with users by showing information on the screen.

For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted. There are many other cases when you can use this.

But, the problem is it does not look good on the screen.

There are many free jQuery plugins that you can use to show the user-friendly message box.

In this tutorial, I am using sweetAlert jQuery plugin to show custom message box on the screen and use it as an alternative to default alert box.

It looks much better than default alert and it is responsive.

Create custom alert with sweetAlert jQuery plugin

Jquery

You generally display an error message while validating the form by using the alert or place message on <div> or <span> elements and show or hide them.

If you have a form which has many elements and you need to add Client-side Validation.

You are using the container to show the error messages in this case you need to create several container elements. It is a time-consuming process.

For making your validation process simpler there are many free jQuery plugins.

In this tutorial, I will explain you about Validation jQuery Plugin, using that you can define validation faster and systematic way.

It has the built-in method which you can use for validation and you can change the text of default error message.

You can also create your own method if you do not find any built-in method according to your requirement.

Add validation to the form with jQuery Validation Plugin

Jquery

With jQuery and javascript, it is possible to control the flow of the right click, cut, copy, and paste within the whole web page or from the particular section.

This type of functionality mainly found in the Test based web application where student not allowed to copy and paste content on the page.

Or displaying the custom context menu on right click.

Disable Right click and cut copy paste with jquery

Jquery

Whether you are a beginner or not to the WordPress, you have seen the shake effect when you go for the Login in Admin Dashboard.

The login box shakes every time when the user enters the wrong username and password.

In this tutorial, I show How you can create the similar kind of effect using jQuery UI.

What in the demonstration?

For demonstration, I am creating two examples – In first, I am creating a basic Login form which shakes on the wrong username and password and in the second example, using the arguments with shake effect.

How to shake an element using jQuery UI

Jquery