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

jQuery is being used in almost every websites and there are plenty of plugins which are used by the web designer for presenting better user experience.

In this tutorial, I discuss How to add a tooltip to a control using jQuery UI that makes its implementation simple.

A tooltip is a message container which shows when the user hovers over the control or an element. It generally contains a short description or some additional information.

Jquery

The accordion is an expandable collapsable container layout which takes less space within the page. It is divided into multiple sections or parts and each has contents.

How it’s Work?

The user only able to view one section at a time for seeing other sections content he/she need to expand that section. When a section header gets clicked then it expands and show its content and collapsed previously opened section.

When its require?
When you page contains many forms or contents here, you can use it to divide them into various sections the effect of this is that now its look more user-friendly and easy to navigate.

Using jQuery UI to create an Accordion

Jquery

AJAX Javascript Jquery PHP

In this tutorial, I talked about a two jQuery method – switchClass() and toggleClass(). As their name suggest its related to classes, and they both are used for changing or replacing the class from an element.

When did it use?

You can use them to show the change of state of the element according to the condition, toggling classes within the elements or may be in some other cases.

For example – You have an Education website where students are assigned to courses. When student reading lessons there is an option for setting Lesson state to read or Unread. For showing the change of state you have created two classes one for unread and another for read which you want to use according to the state of a lesson.

In this kind of case you can either use removeClass() and addClass() for removing one class and add another class to an element or do it using a single method (switchClass or toggleClass).

Within tutorial, I am creating a small example for that where I use switchClass() method and various other examples to explain both methods.

How to use switchClass and toggleClass in jQuery

Javascript Jquery

In this short tutorial, I will show you How you can check or uncheck all checkboxes and list box options using jQuery and JavaScript. I use them many times within projects.

When its required

It is required when you have the list of items and you have to select multiple items from the list.

Let me explain with an example –

You are creating a department information form where you also have the list of users, In that case for assigning users you need to check them one by one.

In some cases, you need to assign all users to a department for that you either do it by checking one by one which is a time-consuming process when you have lots of users or create a separate checkbox for this. On a single click, you can either checked them all or uncheck it.

Javascript Jquery

In this tutorial, we will learn How you can use jQuery to show and hide the table column.

When does it require ?

When the table has multiple columns and you want to allow the user to hide and show those columns which user doesn’t want to see on the screen. This gives more flexibility to the user.

What in the Demonstration ?

In the demonstration, we will create a Table structure which shows employees list and adding some checkboxes. When checkboxes get checked then hiding the Table column based on selection and reset it when it is unchecked.

Jquery PHP