Category: 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.

What in the demonstration?

I show you with two examples, How you can 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

AJAX Jquery

There are many cases where we have required 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.

In this tutorial, I show How to use jQuery AJAX to implementing this.

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.

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 introduce you with a sweetAlert jQuery plugin by which you can show custom message box on the screen and use it as an alternative to default alert box.

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.

Jquery

In this quick tutorial, I show How you can disable Right-click and keyboard shortcut of cut,copy, and paste from the whole document or in a particular element using jQuery.

You can find this type of functionality mainly in Test based web application where student not allowed to copy and paste content on the page.

When it’s required?

There are many cases where you can use it.

For example – You want to change the behavior of Right click and show your own context menu or For stopping the user to copy your page contents.

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

Twitter only allows maximum 140 characters of a tweet. At the time of entering input, it shows how many characters are remaining.

Remaining character value changes on every character input.

Similar to Twitter other websites also uses the same functionality.

For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.

In this tutorial, I am creating the similar type of functionality with jQuery.

Twitter like remaining character count using jQuery

Javascript Jquery

We generally require sorting feature in the Table layout when there is many columns or lots of data.

In this tutorial, I show you How you can implement it using AJAX and PHP within your project.

In the demonstration, I am creating a table layout which shows the list of employees and adding click event in header column. Within click, calling a function in which passing column name as an argument and sending AJAX request.

AJAX Jquery PHP

In this tutorial, I show you How to use AJAX to show data in tooltip dynamically.

For tooltip creation, I am using jQuery UI plugin, which is very easy to implement within the project.

If you don’t now How to add a tooltip to an element or control using jQuery UI plugin, I recommend you the check my previous tutorial where I explained How to setup on control and some tooltip options,methods, and events with examples.

Jquery