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

By adding file upload to the project, there may case arrives where you have to check image width and height before upload if you only allowed image files for uploading.

This is very common in Job Application Forms where the user has only can upload its profile photo of given dimensions other it’s not uploaded.

In this tutorial, I explain you with an example how to implement it. For uploading, I am using AJAX and PHP and done restriction with JavaScript.

How to Validate Image width And Height Before Upload Using JavaScript

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

The check and uncheck all functionality basically is seen where there is the large list of records are available. This small feature makes little easier for the users to perform an action.

You may have seen it on Gmail, WordPress Admin dashboard.

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

How to Check and uncheck all using jQuery and JavaScript

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

Jquery PHP

You can send JavaScript Array as data in the AJAX request which generally require when need to send a group of related values e.g. pass all checked checkboxes values.

In the demonstration, I will initialize JavaScript Array with all checked checkboxes values and send it as AJAX data.

How to Send JavaScript Array to the AJAX using jQuery and PHP

AJAX Jquery PHP

JSON stands for JavaScript Object Notation, it is a data interchange format which is also been used to passing data from the server.

It is best and effective way to return data when you want to return multiple values as a response from AJAX.

You couldn’t directly return an array from AJAX, it must have converted in the valid format.

In this case, you can either use XML or JSON format.

In the tutorial demonstration, I will return an array of users from AJAX, while return converts the array into JSON format using the json_encode() function in the PHP.

On the basis of response show data in tabular format.

Return JSON response from AJAX using jQuery and PHP

AJAX Jquery PHP

In this tutorial, I will show another type of pagination which has Load more button for loading new content.

This type of pagination you have seen on many websites or in mobiles apps.

When the users get clicks the load button, the next list of data is being fetched and append it to the last of existing structure.

What in the demonstration?

For demonstration, purpose I am showing the list of posts when all posts are being displayed on the web page then show the Hide button instead of Load more.

Hiding all posts except the first 3 posts when the hide button gets clicked.

Load more results with jQuery,AJAX, and PHP

AJAX Jquery PHP

Drag and drop is a simple way to allow the users to upload their files by dropping to the container. Nowadays most websites allow uploading using both drag and drop and the file browse e.g. PushBullet, Facebook, SlideShare, etc.

I am using AJAX to save the file to the server which triggers when the file dropped on the target container.

In this tutorial, I show how you can implement the similar type of feature in your project and which show thumbnail when the file successfully uploaded.

Drag and drop file upload with jQuery and AJAX

AJAX Jquery PHP