Category: Javascript

Twitter only allows maximum 140 characters of a tweet. At the time of entering input, it shows how many characters are remaining.

Remaining character value changes on every character input.

Similar to Twitter other websites also uses the same functionality.

For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.

In this tutorial, I am creating the similar type of functionality with jQuery.

Twitter like remaining character count using jQuery

Javascript JQuery

Dropzone.js is a lightweight JavaScript library which provides drag and drops file upload with preview.

It works with or without jQuery within the project and also it doesn’t require any other libraries.

It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.

You not only upload the file by drag n’ drop you can also use file chooser dialog that’s open when drag n’ drop widget gets clicked. While uploading it shows the progress bar, generates thumbnail image and shows file size in preview after uploading.

How to upload a file using Dropzone.js with PHP

How To Javascript PHP

By adding file upload to the project, there may case arrives where you have to check image width and height before upload if you only allowed image files for uploading.

This is very common in Job Application Forms where the user has only can upload its profile photo of given dimensions other it’s not uploaded.

In this tutorial, I explain you with an example how to implement it. For uploading, I am using AJAX and PHP and done restriction with JavaScript.

How to Validate Image width And Height Before Upload Using JavaScript

AJAX Javascript JQuery PHP

The switchClass and toggleClass are jQuery methods that are used to swap classes from the element.

You can use these methods to change of state of the element according to the condition, toggling classes within the elements or maybe in some other cases.

In this tutorial, I am creating various examples to explain both methods.

How to use switchClass and toggleClass in jQuery

Javascript JQuery

The check and uncheck all functionality basically is seen where the large list of records are available. This small feature makes little easier for the users to perform an action.

It is very useful when need to perform the same operation on all records instead of specific record.

You may have seen this in Gmail, WordPress Admin dashboard.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

How to Check and uncheck all using jQuery and JavaScript

How To Javascript JQuery

Google reCaptcha generally used to protect the website from spammers. It is best and easy way to show CAPTCHA within the website.

It is easy to integrate into the form and when it properly setup then it shows a I’m not a Robot Checkbox that shows different types of images on the screen when it gets clicked.

The user needs to select images according to the asked question.

How to Integrate Google reCAPTCHA with PHP

How To Javascript PHP

Node.js is a very powerful JavaScript-based framework/platform built on Google Chrome’s JavaScript V8 Engine which makes it possible to run Javascript on the server side.

It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. It is awesome for real time stuff for example if we use PHP for this then it is not good for this because it consumes a lot of memory.

Using NPM — a tool that makes installing and managing Node modules — it’s quite easy to add many useful tools to your web development toolkit.

Node.js is open source, completely free, and used by thousands of developers around the world.

Node.js lets developers write JavaScript for both client and server side, thereby making it easy to send data between the server and the client to synchronize the data automatically.

The data changes on the server immediately reflect in the client and the webpage that displays this data automatically updates itself.

How to install Node.js on Windows

Javascript

Javascript