jQuery Tutorials

Keep jQuery Datepicker in same place on resize




This tutorial will help you to keep jQuery Datepicker in same place on resize. I have used multiple jQuery UI datepickers in a simple layout in responsive website page. Issue: When I have open the datepicker by clicking on the input field and then resize the window, the datepicker does not stay along with the input field. As there are multiple datepicker fields so it must be necessary to stay …

Continue reading




Scroll to Top using jQuery

Scroll to Top using jQuery




In this tutorial I will explain how to implement Smooth Scroll to Top functionality using jQuery. This feature helps user to move quickly top of the page. I will explain this with a simple example. In this example the scroll to top button will appear, when user scroll the page more then 300px. HTML Part: Following is the HTML part. CSS Part: Now add following CSS for Back to Top …

Continue reading




Take a Screenshot Using Html2Canvas JS

Take a Screenshot Using Html2Canvas JS




In previous post I have explained about Feedback with screenshot using feedback JS, which is using Html2Canvas JS to take a screenshot, now In this tutorial I will show how you can take a screenshot using Html2Canvas JS. This script allows you take a screenshot of a part of the web page also. You can download Html2Canvas jQuery plugin from https://github.com/niklasvh/html2canvas/releases. Following is an example to take a screenshot of full …

Continue reading




Create a Password Strength checker in jQuery

Create a Password Strength checker in jQuery




In this tutorial I will show how you can create password strength checker in jQuery for your website. For this you need to have a jQuery plugin pwdMeter. In this example you will see five stages of password strength very weak, weak, medium, strong and very strong all calculated on your passwords characters and its length. To make a very strong password you have to add minimum 13 digit contain …

Continue reading




Feedback with screenshot using feedback JS

Send feedback with screenshot using feedback JS




In this tutorial I will explain how you can send feedback with screenshot using Feedback JS. This script allows you to create feedback form with screenshot with the form. Screenshot is based on the information available on the page. This script is based on html2canvas library, which renders the current page as a canvas image. As the whole image is created on the clients browser, it does not require any …

Continue reading




Load Data While Page Scroll with jQuery

Load Data While Page Scroll with jQuery




Now a days data load while page scroll technique is mostly used by most of successful websites like Facebook, Google and Twitter. While you scroll down the page loads more and more data, using Ajax request this is called infinity scroll. So, Today I am going to show you how to load data while page scroll with jQuery and PHP using jQuery’s plugin. There are some jQuery method available to …

Continue reading




Take Photo Using Web Camera in PHP

Take Photo Using Web Camera in PHP




Recently I have implemented take photo using web camera in my website for the profile photo. I found jQuery webcam plugin for the same. With this plugin image can be display to canvas to store the image on the server. So in this tutorial I am giving simple steps to implement take photo using web camera in PHP with live demo. First we need to add following scripts in head …

Continue reading




Allow Only Numbers in TextBox jQuery

Allow Only Numbers in TextBox jQuery




Some of the user information, you want in number/numeric form only and you can force a textbox to accept only numeric input. Using jQuery we can control user input with different key event handlers. So in this post I am going to share the jQuery code snippet to allow only numbers in textbox. Lets take a simple example for understand this: If you want to allow only numbers in textbox …

Continue reading