Makitweb Posts

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

There is always the possibility that the users may not enter the values as we expected and the data is being saved on the Database table. E.g. unwanted whitespace or characters with the value.

You will see the issue when you check for duplicate records or sort the list.

MySQL have some string functions that you can use to eliminate the extra space or characters from the field.

Remove unwanted whitespace from the column – MySQL

DataBase

How To Javascript Jquery

Most of the eCommerce sites e.g. Flipkart, Snapdeal, etc have a price range slider for searching purpose.

The user doesn’t have to enter price range manually.

It will automatically filter the list when the price is been changed by the user.

In this tutorial, I am implementing the similar type of functionality with AngularJS and PHP.

Using jQuery UI to create the slider.

Make Price Range Slider with AngularJS and PHP

AngularJS PHP

The alphabetical pagination searches the records according to the first character in a specific column.

You can either manually fix the characters from A-Z or use the database table column value to create the list.

In this demonstration, I list all available character from a field in the Table and show the total number of records with it. Filter the record whenever a character is being pressed from the list.

Create alphabetical pagination with PHP MySQL

PHP

It is always a better idea to check the entered username exists or not if you are allowing the users to choose username while registration and wants it to be unique.

With this, the user will instantly know that their chosen username is available or not.

Check if username exists with AngularJS

AngularJS PHP

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