jQuery Tutorials

How to catch events on future elements in jQuery




In this tutorial I will show you how to catch events on future elements in jQuery. For example if we need to add click event on ajax calls loaded elements we need to use on() method of jQuery. Syntax for on() method: $(document).on(event, selector, handler) Example: Also we can replace $(document) with a selector for a static parent of the element. For example, if we have a static div element …

Continue reading




How to check a HTML element exists and empty in jQuery




In this tutorial I will show you how to check a HTML element exists and empty using jQuery. Some times we need to check if the DIV is exists or not to add some conditional content. This tutorial will be helpful. For example we have following DIV: If you want to check HTML element is exists or not, you can use the length property of the jQuery object. Now if …

Continue reading




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