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

Read More Easily add Tooltip to the control using jQuery UI Plugin

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
Read More 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

Read More 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.

Read More 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.

Read More How to Hide and Show the Table column using jQuery

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

Read More 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

Read More 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

Read More 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

Read More Drag and drop file upload with jQuery and AJAX

AJAX Jquery PHP