Check uncheck multiple checkboxes using Javascript

Must Read : Check uncheck multiple checkboxes using Javascript

Here’s a useful Javascript function I recently coded to allow a list of checkboxes in a form to be selected or unselected. The CheckAll function takes in two parameters, the first is the form name and the second is a boolean value – true or false, true being to select all checkboxes and false to un-select all.

Javascript function to handle the main logic

The above code is finish here but this is not the end. Now I show you another way to select group of check boxes

Check uncheck Gmail-like Grouped checkboxes using jQuery

This script will not select all the check boxes using a single but but this will give you a chance to select group of check boxes.

I create the above two application in one page.

Ajax File Upload with Progress Bar

Must Read : Ajax File Upload with Progress Bar

Step1:Create html markup and include main js, jQuery Form Plugin js and custom js

At first when you view the html form upload button is initially disable. After upload an image it will enable and then you click on upload button. Here I write a simple jQuery for this. Ajax File Upload form is well commented so please read the comment. It will help you to integrate it with your website.

Step2: Create custom.js file

The file is well commented. I think you will understand all the code easily.

Step3: Create upload_file.php

Simply paste the below code into upload_file.php

Now you are done.

Submit Form Without Page Refresh With php and ajax

Must Read : Submit Form Without Page Refresh With php and ajax

Step1: Create HTML form markup

This is a very basic html form where I include a css file(style.css), jQuery main library(jquery-1.11.1.min.js) and send_data.js file where I wrote the form validation code and send data to a php file.

Step2: Create send_data.js form input field validation and send ajax request to the php file

All the jQuery code is well commented. So do not worry.

Create email_send.php where I put server side validation and php mail send code

Now you learn how to submit form without page refresh. You can use this application with any form.

Convert A Date Into Timestamp In JavaScript

Must Read : Convert A Date Into Timestamp In JavaScript

To get the unix timestamp using JavaScript you need to use the getTime() function of the build in Date object. As this returns the number of milliseconds then we must divide the number by 1000 and round it in order to get the timestamp in seconds.

Math.round(new Date().getTime()/1000);

To convert a date into a timestamp we need to use the UTC() function of the Date object. This function takes 3 required parameters and 4 optional parameters. The 3 required parameters are the year, month and day, in that order. The optional 4 parameters are the hours, minutes, seconds and milliseconds of the time, in that order.

To create the time do something like this:

var datum = new Date(Date.UTC('2009','01','13','23','31','30'));
return datum.getTime()/1000;

This prints out 1234567890. Here is a function to simplify things:

function toTimestamp(year,month,day,hour,minute,second){
 var datum = new Date(Date.UTC(year,month-1,day,hour,minute,second));
 return datum.getTime()/1000;
}

Notice that when adding in the month you need to minus the value by 1. This is because the function requires a month value between 0 and 11. However, there is an easier way of getting the timestamp by using the parse() function. This function returns the timestamp in milliseconds, so we need to divide it by 1000 in order to get the timestamp.

function toTimestamp(strDate){
 var datum = Date.parse(strDate);
 return datum/1000;
}

This can be run by using the following, not that the date must be month/day when writing the date like this.

 alert(toTimestamp('02/13/2009 23:31:30'));

Javascript redirect URL

Must Read : Javascript redirect URL

How to redirect URL page with Javascript.

Javascript redirect does not return 301 permanent redirect status code.

Javscript redirect

Replace old page with redirection code with the URL of the page you want to redirect to.

oldpage.html

Search engines use the 301 status code to transfer the page rank from the old URL to the new URL.

Javascript redirection return http response status code: 200 OK.

So Javascript redirection is not search engine friendly and it is better to use other redirection methods that return status code: 301 Moved Permanently.

Javascript redirect example

test.html

Customizable System Level Web Notification with Vanilla JavaScript – Screamer.JS

Must Read : Customizable System Level Web Notification with Vanilla JavaScript – Screamer.JS

Screamer.JS is a lightweight Vanilla JavaScript library which brings your web notifications to the system level using Web Notifications API.

Basic usage:

Include the screamer.js JavaScript file anywhere on your web page.

Create a button to toggle the web notification.

Create an new instance of Screamer.

Bind the click event to the trigger button and display the web notification using scream.notify() methods.

All configuration options.

More methods.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/willianjusten/screamer-js/archive/master.zip” linkrel=””]