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

To get back the user attention back to your site you can animate the site page title and icon when the user leaves your site or open an another tab.

In this tutorial, I am using two jQuery plugins – iMissYou and mFancyTitle for customization.

I will also show how you can do this with just jQuery.

How to change page title and icon on Page leave with jQuery

How To Jquery

The BttrLazyLoading is a jQuery plugin that load images which are within the viewport. This delays loading of images in long web pages.

It allows defining images for 4 different screen sizes ( mobile, tablet, desktop and large desktop ). It has various options for customization.

Lazy image load with BttrLazyLoading jQuery plugin

Jquery

The Back to Top button takes the user back to the top of the page.

The button is visible at the bottom when the user starts scrolling the web page and crosses the defined range. It remains fixed at its position during the scroll.

It auto hide when the user reaches the top of the page.

Back to top with CSS and jQuery

Jquery

The ReadRemaining.js is a jQuery library which shows readers how much time is left to finish reading an article.

The estimated time will be different for each user because it calculates time-based on the speed at which the user is scrolling the page.

This display a small tooltip at the bottom which is customizable with options e.g. set the delay before it will visible on the screen, time format, set time range etc.

Display estimated reading time with ReadRemaining.js

Jquery