Makitweb Posts

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

The .clone() method creates the duplicate of the matched elements. It allows either event handler will be copy or not, it by default doesn’t copy attached events.

This simply your code when you need to make the clone of the group of elements. You don’t have the need to create each group elements and insert it.

In this tutorial, I show how you can use .clone() method to create the clone of the elements.

Create duplicate of the elements with .clone() - jQuery

JQuery

When working with multiple AJAX requests at that time its hard to detect when will be all request is being completed.

You can use the setTimout() method which will execute your action after your given time. But it is not a better solution.

jQuery has the inbuilt event handler to detect AJAX completion.

Detect when all AJAX requests are complete - jQuery

AJAX JQuery

A slider is a good to avoid bad input from the user if you want them to pick values within the range.

To add slider control I am using jQuery UI slider.

In the tutorial demonstration, I am list records from the MySQL database table and filter the list on salary basis using slider widget.

How to use jQuery UI slider to filter records with AJAX

AJAX JQuery

In JavaScript, setTimeout() and setInterval() methods are used to add delay before executing some action.

The setTimeout() method only executes the statement once but the setInterval() method execute repeatedly until the interval is not been cleared.

In this tutorial, I show how you can use setTimeout() method to set some delay before redirecting to another page.

Page Redirect after specified time with JavaScript

Javascript

In this tutorial, I show you some jQuery plugins by using it you can capture the user signature on your web page.

They add a container on the web page where the user can draw its signature using mouse pointer.

I discuss the following plugins –

  • jSignature
  • Signature Pad
  • jQuery UI Signature

Capture signature in the webpage with jQuery plugins

Javascript JQuery