Category: Javascript

You cannot control when user will refresh the web page and close it, but it’s important sometimes to display confirmation alert before closing the Tab.

The user may be mistaken clicked the close button and lost some important data.

You have seen in Shopping websites when you are in the middle of payment or you are paying the Bill and if you try to refresh the web page then it will show a confirm alert on the screen.

When is it Required?

  • When the form has many fields and the user filled the form but somehow the Browser is being closed. Now, the user needs to again fill that long form.
  • While student giving the online test and not completed yet and try to close or refresh the page.
  • There are many other situations where you can use it.

In this post, I discuss How you can detect Browser Tab close and refresh using JavaScript.

How to know a browser tab close or refresh with JavaScript

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

Javascript

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 there is the large list of records are available. This small feature makes little easier for the users to perform an action.

You may have seen it on 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

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

Looping statement is use to execute and repeat a block of statements depending on the condition. In Javascript, we have the following looping statements –  while do while for while…

Javascript

When we adding Javascript code to HTML page then it must be in between <script> and </script> tags. We can place Javascript in <body> and <head> section of an HTML…

Javascript