Category: Javascript

Javascript

for-in is an another type of looping statement within JavaScript. Which works similarly like a foreach loop in PHP.

When performing iteration with for-in then it returns key on each iteration.

It works with both –

  1. Array and
  2. Object

for-in loop in JavaScript

Javascript

Did you ever thought to make an editable div element or <p>, <span>, etc. that works same like a Text field and Textarea.

Some websites allow the user to edit their content by just pointing to the content and start to update it.

You will already know that <div> is a read-only container that means you can’t edit the content inside of it.

In this tutorial, I show how you can do this with the contentEditable attribute.

How to make editable div element with contentEditable attribute

How To Javascript

If you are familiar with PHP where for reading parameters from URL you can use either $_GET or $_REQUEST which take the name of the argument and return value of it.

In the JavaScript, there is no direct way to read arguments from URL like in PHP you need to do some work for getting it.

In this tutorial, I show how you can read and extract parameters with JavaScript.

Read and Get Parameters from URL with JavaScript

Javascript

Some websites allow the user to toggle the password field to see the entered text while registering on the site.

A common example of this – when you set Wifi password within you mobile device where it also allows showing the password.

They provide an element e.g – checkbox or a button when its gets clicked then the password field text visible on the screen and when it again gets clicked then it will hide the visible text and get back to its default state.

Javascript Jquery

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 he/she 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

AJAX Javascript Jquery PHP

In this tutorial, I talked about a two jQuery method – switchClass() and toggleClass(). As their name suggest its related to classes, and they both are used for changing or replacing the class from an element.

When did it use?

You can use them to show the change of state of the element according to the condition, toggling classes within the elements or may be in some other cases.

For example – You have an Education website where students are assigned to courses. When student reading lessons there is an option for setting Lesson state to read or Unread. For showing the change of state you have created two classes one for unread and another for read which you want to use according to the state of a lesson.

In this kind of case you can either use removeClass() and addClass() for removing one class and add another class to an element or do it using a single method (switchClass or toggleClass).

Within tutorial, I am creating a small example for that where I use switchClass() method and various other examples to explain both methods.

How to use switchClass and toggleClass in jQuery

Javascript Jquery