Category: Jquery

Bootstrap provides dozens of custom plugins that helps to create better UI. With this, you can easily add tooltip to the HTML elements.

A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hint or quick information to the user.

It is helpful for the new visitor to the website to understand the advanced UI and functionality.

Add tooltip to the element with Bootstrap

Jquery

Html2Canvas is a JavaScript library that provides functionality to take screenshot of the whole web page or specific part.

It technically doesn’t take the screenshot but creates the view based on the available information on the page.

This returns HTML5 canvas element which you can use to show screenshot preview on the screen or create a new image file.

Take screenshot of webpage with html2canvas

Jquery

AJAX is use to communicate with the server to perform the action without the need to refresh the page.

You can either handle AJAX requests on the same page or on the separate page.

In this tutorial, I show how you can send and receive AJAX requests on the same page.

How to handle AJAX request on the same page - PHP

AJAX Jquery PHP

The pace.js is an automatic page load progress bar. You don’t need to write any code to initialize the script during page load.

It is easy to implement and not dependent on any other external JavaScript libraries.

You can also use this with AJAX request to show the progress bar when the request is been triggered.

Several themes with different-different colors are available that you can use.

Automatic page load progress bar with Pace.js

Javascript Jquery

How To Javascript Jquery

By default, jQuery uses $ as an alias for jQuery because of this reason sometimes it conflicts with other JS libraries if they are also using $ as a function or variable name.

In this tutorial, I show some of the ways by using them you can avoid jQuery conflict with any other JS libraries.

How to avoid jQuery conflict with other JS libraries

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