Category: Jquery

jQuery has inbuilt methods that allow searching for the certain class within the element.

By using them you can easily check class on the selector and perform the action according to the response.

In this tutorial, I am explaining the following 3 methods –

  • hasClass()
  • is()
  • attr()

Check if element has certain class - jQuery

Jquery

Jquery

PullToRefresh.js is a JavaScript plugin that lets you implement pull to refresh functionality on your web page. The plugin is not dependent on any other libraries.

You can define your own action when the user performs pull down action on the web page.

It has various options for customizing the default behavior.

Pull down to refresh with PulltoRefresh.js

Javascript Jquery

The Chosen jQuery plugin makes your HTML select element more user-friendly. It is available in both jQuery and Prototype flavor.

It can handle both single and multi-select options. Add a search box to filter the list of options.

There are various options available that allow us to customize the select element behavior.

Make user friendly select element with Chosen - jQuery

Jquery

The infinite page scroll you have seen on the social networking sites – Facebook, Twitter or on e-commerce websites where the new content is automatically loaded when scrolling down to the web page.

For implementing this functionality using jQuery to detect page scroll when the user reaches the end of the web page then send an AJAX request to load new content.

Load content on page scroll with jQuery and AJAX

AJAX Jquery PHP

Jquery

The main aim of jQuery Complexify plugin is to measure how complex is the user entered password and show the live feedback in the form of strength bars.

In this tutorial, I am using jQuery UI Progressbar widget to display the password strength according to the user input.

Password Strength checker with jQuery Complexify

Jquery

You have seen on e-commerce websites for display the details view of a product. The part of the image will zoom according to mouse movement.

You can also implement this on your own website to provide better user experience.

In this tutorial, I am using ZooMove jQuery plugin for zoom functionality. It is easy to implement and customizable.

jQuery - Zoom images on mouse over with ZooMove

Jquery

Jquery

Overhang.js is a lightweight jQuery plugin which displays notification, prompt, and confirmation on the screen.

This adds a strip bar at the top of the page when it executes.

It has various options that help us to customize e.g. duration, speed, etc and change the look according to the website theme e.g. change background, accent, and message text color.

It also uses jQuery UI library to display an alert on the screen.

Show Notification,prompt, and confirmation with Overhang.js

Jquery