Author: <span class="vcard">Yogesh Singh</span>

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

There are many sites which offer free weather widget for the website. That are easy to embed.

You only need to specify some of the mandatory fields for generating the code.

In this tutorial, I show you some of the website from their you can get weather widget for your site.

How to show weather widget on the website

How To

Javascript

The Siema is a lightweight JavaScript plugin that adds carousel slider on the page. It is not dependent on any other plugins and not require to do any styling.

It is easy to setup on the page.

Few options and methods are available for customization.

Make Carousel slider with siema plugin - JavaScript

Javascript

The autocomplete functionality gives the user suggestions based on its input. From there, it can select an option.

In the demonstration, I am creating a search box and display suggestion list whenever the user input value in the search box.

Set selected value to search box when an option gets selected.

For implementing this functionality I am using AngularJS and PHP.

Create autocomplete search with AngularJS and PHP

AngularJS PHP

Jquery