Featured
-
Top 10 Template Engines for JavaScript
What is a Template engine? Template Engines are
by nishant.mishra -
jQuery Accordion
Hello readers! In this Blog we will gain knowled
by vishwanath.rana -
How to make Numbered and bulleted list in HTML Editor with JavaScript
Hello all, Working with HTML Editor we wanted t
by gaurav.gautam -
How to hide particular div with just one click?
Hi, you want a condition in which the particula
by abhishek.tiwari.458 -
How to Create and Retrieve Array in Javascript?
If you want to store multiple values in a single v
by siddharth.shahi
Tags
How to make a simple file reader using Javascript
Hello Readers, If you developing the website to browse any file and showing its's content on the web page, Then by using Javascript you can do this as follows:-
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
...
Implementing Tooltip using jQuery UI
We can use jQuery UI to implement a tooltip in our pages. It contains a set of user interface interactions.Tooltip is used to show some additional information in the context of each field.
This is how you can use Jquery UI:
<!doctype ht...
How to go back from a page using window.history.back in angularjs?
We can use the history.back() method which loads the previous URL in the history list. It functions the same as clicking the Back button in the browser.
Here is the code snippet to show it's usage :,
<html>
<header ng-controller=...
Difference among bind(), live(), delegate(), on() methods in jQuery
Hello,
Most of the time we have a bit of confusion between the jQuery .bind(), .live(), .delegate(), and .on() methods and when they should be used. Here I am sharing some information regarding this:
bind() Method:
Syntax: .bind( eventTyp...
HTML5 Canvas Game
Canvas can be used to draw graphs, shapes, images, and to make animations.
Here is the example below for making the game in canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
Javascript DOM -document.getElementByTagName( ) Method
In Javascript, this method is used to get the elements of specified tag name.
Parameter values :
Parameter : String -> This is required. And you give the tagname of that element you want to get .
Syntax:
document.getElementByTagName("na...
Display image before upload using javascript/jQuery
This post demonstrates how to display an image prior to uploading it on server.
This demo uses the JavaScript's readAsDataURL method of reader API which will read image as url.
<html>
<head>
<script src="https://a...
Middleware in Express JS
Middleware is the core idea of Express.js used behind processing the request and routing. By seeing how middleware functions, you can make more maintainble applications with less code. The minute a solicitation is gotten by an Express.js applicat...
Circular graphs in SVG
Hello,
Here I am sharing some information related to circular graphs using Javascript.
JavaScript provides a library that generates circular graphs in SVG.
We need to include circles.js or circles.min.js file in the HTML file. It can be do...
How to validate file extension and size before upload?
Here is the example to validate the file extension and size before upload. Regular expression has been used to validate the file extension. And to validate file size, we use size property of file input i.e., img.files[0].size. Onclick event of bu...
How to get the data of a form in javascript?
We can use the serialize() method to get the data of a form. This method creates a text string in URL-encoded notation by serializing form values. It helps to select more than one element of the form.
Syntax:
$(selector).serilaize();
...
How to detect if user click inside and outside of an Iframe
Hello Reader's! If you are developing the contents with Iframe window and you want make it show the click inside and outside the iframe, Then you can use the code below:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&...
How to show loading icon while page is loading
Hello Reader's, If your webpage is taking too long to take data from database and you want to fix a loading icon for the time then you can use the following Javascript based code for that:-
First Step:-
Write the following code just after yo...
How to edit column header using Handson Table
How to edit column header using Handson Table
While using Handson Table, I faced a issue of making Headers editable.
The HandsonTable plugin can be downloaded from the following link:
github
The solution which I got for making head...
AJAX in javascript
AJAX means Asynchronous JavaScript and XML and it is a group of inter-related technologies like javascript, dom, xml etc.
AJAX is used to make site or page more interactive and fast.
without reloading the web page, you can send and receive ...
How to include a javascript file in another javascript file?
We can include one js file in another js by the following ways:-
jQuery.getScript( url [, success ])
This function basically loads a javascript file using a GET HTTP request from the server and then execute it. <./p>
Here is an exa...
Javascript - innerHTML
For writing dynamic html on the html document, we use innerHTML property of javascript.
It is basically used in the web pages to create the dynamic html such as registration form, comment form etc.
Example
<html>
<body>
&l...
How to convert Javascript object into array
Let's see the example below:-
We have a numb as JS object
var numb = {
1: [22, 33, 44],
2: [11, 99, 66]
};
var DefineArray = $.map(numb, function(value, index) {
return [value];
});
console.log(DefineArray);
Ou...
How to load header and footer using Javascript
Hello Reader's. If you have developed the header and footer of the website separatly then it's very easy to make them render on a webpage. By using the JS you can call them with a single line of code as written below:-
<html>
<head&g...
How to detect the arrow key on press using Javascript
Hello reader's! If you are making the website based on user press key events. Then to detect the arrow key pressed by user we can code as below:-
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert...
What is mean by +_ in JS
Hello Reader's
Sometimes you might have seen " var = +_" syntax in JS. So this line is as simple as assiging the variable to another, Where + is transfering the value of _ to var and _ is just the variable.
var _ = "D5200";
var newVar = +_;...
How to get the POST variable using Javascript
Hello Reader's!
If you have desinged the html form in PHP and want to receive the POST variables in JS then there is a method below:-
var PostVar = <?php echo $_POST['name'] ?>;
Like the way above the var PostVar will get the val...
How to get the variable by it's name using Javascript
Hello Reader's, Suppose you having a variable and you want to find it by it's name, See the example below:-
var MyVar = '12';
alert(window['MyVar']);
Output:-
12
No if you have variable like this way
var MyVar = {IND:'value12...
How to detect if web page is refreshed using Javascript
Hello Reader's! if you need to detect whether the webpage is being refreshed by using Javascript you can do this like the example below:-
function CheckRefresh() {
if(document.cookie.indexOf('mycookie')==-1) {
// cookie doesn't exist, ...
how to convert string into date format using Javascript
If you have a sting in the format of dd-mm-yyyy and you need to convert it into date format then you can see the operation below:-
var date1 = "07-11-2015";
var numbers = date1.match(/\d+/g);
var date = new Date(numbers[2], numbers[0]-1, n...
How to make custom HTML 5 email validation
Hello Reader!
If you have been working with HTML 5 validation then on incorrect email address web broser will show the default error message "please enter a valid email address".
Now you can make it custom and write your own message. Lets see t...
How to get month name from given date using Javascript
Hello Reader's! On a date given like (03/25/2014) if you want to get the month name from it then by using JS you can do this as follow:-
var objDate = new Date("12/12/2009"),
locale = "en-us",
month = objDate.toLocaleString(locale, { mo...
How to block enter button for submitting the form using Javascript
Hello Reader! If you want your html form that block the pressing action of enter button and accept only submit button then you can see how its working in the example below :-
$("FormSubmit").bind("keypress", function (e) {
if (e.keyCode =...
How to make a JSON call using jQuery?
To make JSON call we use getJSON method. Here is the syntax and description of it.
Syntax :
$.getJSON( url, [data], [callback] )
Description
1. url : It is URL where the request is send and which emits out JSON.
2. data : this ...
How to show and hide a pop-up div on a button click using jquery?
Showing a pop-up div on a button click is a very simple task. Below is the code for showing and closing(hiding) a div and use it like a popup using jquery.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8...
Javascript events in HTML
HTML events happen to HTML codes. When we add Javascript in HTML pages, Javascript then react to those HTML pages.HTML event does by the browser or a user.
Some common HTML events are -->>
Here is a list of some common HTML events:
1...
default keword in javascript
defautl keyword is used in two situations
1)switch statement.
2)export statement.
1) example of switch statement
switch (expr) {
case "Oranges":
console.log("Oranges are my 1st choice.");
break;
case "Apples":
console...
JQuery Chaining
For running multiple jQuery methods within a single statement,we make use of chaining.
here is the example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"...
Adding Elements in JQuery
For adding new HTML elements, following methods are used:
1)append().
2)prepend().
1)append
This method is used to insert content at the end of the selected elements.
<!DOCTYPE html>
<html>
<head>
<script src=...
Using MySQL with node.js
Hello Everyone , In this blog we will discuss about how to use MYSQL in node.js.
node-mysql is one of the best modules which can be used for working with MySQL database.
To install the MySQL in node.js driver you have to follow up with the be...
How "this" keyword works in Javascript
The code example of this keyword in Javascript
var fullname = 'David';
var obj = {
fullname: 'john mars',
prop: {
fullname: 'Brett',
getFullname: function() {
return this.fullname;
...
Front-end Development With AngularJS
Front-end development is basically a mix of HTML, CSS and Javascript used to create websites or web apps that allow users to have direct interaction. Users grasp more information when they do not face hassles of slow pages and poor interfaces. Th...
Finding mouse cordinate by JQuery
By using jquery event.pageX and event.pageY we find the coordinate of mouse. The PageX event shows the edges from left and the PageY event shows the edges from top.
<!doctype html>
<html lang="en">
<head>
<meta cha...
jQuery Selectors
jQuery selectors gives you the facility to select and manipulate HTML elements according to your needs and requirements.
The element Selector
Based on the element name,The jQuery selector element selects elements.
Example
<!DOCTY...
How to convert Unix timestamp to time using Javascript
Hello Reader! If you having the timestamp generated by Unix and you want it to be in format of time then you can use the example code below:-
function MakeTime(TimeUnix) {
var d = new Date(TimeUnix);
var h = (d.getHours().toString(...
How to change image onmouseover event
Hello Reader!
If you are looking for a quick onmouseover event that changes the image over another image then you can use the following library code :-
<img src='FirstImage.jpg' width='120' height='70' onmouseover="this.src='SecondImage....
Javascript Screen Object
This Object return all the information related to the browser screen . Like width of a screen , height of a screen , color Depth and pixel depth etc .
Syntax :
window.screen
Some important property of screen :
1) width : It return the w...
createElement() Method in JavaScript
createElement() Method in JavaScript is used to create a HTML element through the JavaSript
The Syntax is as:
var element = document.createElement(tagName);
the Tag name in statement defines the HTML element to be created. for the sa...
How to show copy, cut and pase action on website
Hello Reader if you looking for any script that makes user a notification whenever he cut, copy of paste data from your website then you can see how it is done below:-
This is the html page
<body>
<h1>jQuery copy, paste and ...
Showing a Popup Window Using Modals in Angularjs
A dialogue box is called modal when it restricts the other functionality of the page until the dialogue box has been closed.
Here is the code for opening a simple modal popup using ‘modals’ in angularjs.
...
How to load a html page inside another web page using Javascript
If you have two html pages and you need to load one inside of another then using Javascript you can easily perform this action by 'load' syntax:
Lets consider two pages one.html and second.html
one.html will go like this
<html>
&...
How to take inputs as only digits using Angular JS
Hello Reader!
If you are designing a html form and wants to make it validate for accepting only digits as input then you can see the code below for the same:-
You can create the html form like this way:-
Validate Price
...
Example of ng show / ng hide in Angular JS
If you learning the Angular JS and use a parameter from an object as the expression then the ng-hide and ng-show are given the correct true/false but always remember these true/false is not like boolean so always return false:
Consider the examp...
How to execute additional code just after opening a new page using Angular JS
In the cases when you execute any server and your attempts to load a new page view and then your codes in directive gets loaded before your services are updated so you can using $rootScope.
This is an example of above case
View
<serv...
How to make add item list using Angular JS
If you want to make a functionality of manually adding items to the list using Angular JS. Then you can use the following code of Angular JS it will work on client side and performs fast.
For the form the HTML will go like this:-
<div n...
