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
File validation using javascript
Hii,
File Validator is a function used when we want to restrict the type of file uploaded.
Using File validator we can easily get file Info for each file uploaded.
If uploaded file is not as per the required format a validator func...
Understanding $emit, $broadcast in AngularJS with example
The services yield by Anjularjs which can be utilized for communication based on event between controllers are $on, $emit, and $broadcast. These are under the publish/subscribe design pattern of angularjs i.e. you can publish an event somewhere a...
append( ) property
append( ) property is used to insert a block of elements inside a particular element. It helps in adding block of element during runtime.This property insert's content, specified by the parameter, to the end of each element in the set o...
What is ReferenceError: $ is not defined
In this post, you will know the reasons behind having the ReferenceError in your console log. Also we will discuss some common case with examples.
There is a common javascript error like this line: you are trying to access a variable or call a f...
What is typeof and how to use it in Javascript
In this post, we will discuss about typeof operator in javascript. First we should know what is typeof.
What is typeof:
typeof is an operator that is used to identify the type of any object in javascript. It returns a value that is st...
Javascript HTML DOM
In Javascript, we can add, delete or edit any HTML element, attributes, values and their corresponding content. DOM stands for Document Object Model that is used in Javascript to represent complete HTML document displayed in web browser.
We ca...
How to restrict a list of domain name in Email validation using JS with demo
If you want to validate your email field with a list of domain name and normal email validation, then we can do that with the help of following code:
HTML:
<div class="form">
<input id="emailAdd" type="text" onkeyup="emailVal()...
javascript:How to remove element of an array
Hii,
This post is in the continuation with my previous post in which i had discussed about inserting mutliple values in an array using different method as per requirements and in this post i will discuss about removing elemen...
Image into base64 dataurl using javascript with demo
Converting image in base64 data url reduces the count of HTTP request and will increase the performance of the website because the load time to transfer data over the internet is too long and it will save the server request time.
There are man...
Manual and Automatic bootstrapping in AngularJS
In Javascript framework like AngularJS there is a bootstrapping process involved and there are certain flow that is involved in it.
There are two types bootstrapping involved in AngularJS:
Automatic bootstrapping
Manual Bootstrapping
...
javascript:How to insert values in an array
hii,
We can insert mutliple value in an array using different method as per requirements.
Here is the list of method we can use to insert values in an array.
Array fill() Method :fill() method is used when we want to fills eithe...
What is MVC architecture in Angular JS
MVC is Model-View-Controller architecture designed for web development. It has three main parts:
In angular the way we organize things is different from the others in javascript.
Model: Model contains all the information that is responsible f...
jQuery checked( ) event
checked( ) property is used in jQuery to manipulate the elements on the checked event of radio buttons, input buttons and select elements. For working on options of select element we should use selected( ) event.
As shown in example below we c...
append( ) and appendTo( ) event in Jquery
append( ) event is used to insert the content at the end of matched set of elements whereas appendTo ( ) event is used to insert matched set of elements at the end of content.Through this we can insert elements at click event, mouse-enter and mou...
not( ) selector jquery
not( ) selector is used to modify the attributes of those who does not match the given selector. It prevents us from complex coding as we can manipulate properties of those which does not match the provided set of elements.
As shown belo...
Blocked loading mixed active content
Blocked loading mixed active content
Hello friends, I was getting warnings in my console and script is not working fine. Please have a look at the screen shot below. I am getting following errors in console:
What I w...
Routing in AngularJs with demo
AngularJs is basically used for the single page application with multiple views.
For this we will be using ng-view directive and certain code of AngularJS to make it possible for you to make multiple view.
Here is a code:
HTML:
...
has event( ) jquery
it helps in reducing set matched of elements to those that have descendant to the matched set of values
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>has demo</title&...
Get Timezone Offset in String format Javascript
Get Timezone Offset in String Format Javascript
Hi Friends,
If we want to retrieve timezone in string format like Asia/Calcutta or America/New_York in javascript. Javascript's method getTimezoneOffset() just return the...
jQuery Callback Functions
JavaScript codes are executed line by line. However, the next line of the code can run even though the effect of the first line of code is not finished. This can create errors.
To prevent this errors, we can create a callback function. callbac...
add( ) event jquery
add( ) event is used to add elements css to the matched set of elements.Through dis we can change the css and add add text to the matched set of elements.It helps in making site more user friendly and interacting.
<!doctype html...
Disable browser back button using JavaScript
Hello Readers! Here is a small blog on how to disable the browser back button. Although it is not advisable to use such tricks in websites as restricting or disabling the browser back button can be annoying for users who might wish to go back to ...
removeClass( ) event
removeClass( ) event is used to remove a particular class from an element on a particular event as mouseenter or mouseleave.It helps in making site more user friendly.
<!doctype html>
<html lang="en">
<head>
...
add class event
add class( ) event is used to add class in a element during run time.It helps in animating designs.Through this we can change the property during run time.
<!doctype html>
<html lang="en">
<head>
<meta cha...
eq event
eq ( ) method in jquerry is used for indexing purpose.Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of thi...
Difference between location.href and location.replace
There are several methods in javascript for redirecting a user to different page in the current browser window.
Two of them are as follow
location.href
location.replace
location.href:- If we use following script then the user will...
Bind method
Bind method is used for attaching an event handler to a document.As shown below click,double click,mouse enter, mouse leave are event handlers directly attached to the document.
<!doctype html>
<html lang="en">
<head>
...
Possible days in a date range using Javascript
Possible days in Date Range using Javascript
Hi friends,
In some cases we try to build a logic where for a case where we need to find all the possible days that are possible inside a date range for any use case like scheduling a meetin...
Node JS Installation and Create Your First Application Using Node JS
Here we are explaining about Nods Js features and how to create your first application using Node JS.
Node.js is a popular open source platform . It work in run-time enviornment for developing server-side web applications. Ryan...
delegate and undelegate method in jquerry
delegate() method attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. The undelegate() method is a way of removing event handlers that have been bound us...
How to make a simple timer in angularjs
Hi all,
We are going to implement count-up timer. In Count up timer, timer starts from 00:00:00 to time you defined. It is used to show duration for example video duration , call duration , etc
In Html file , Just add binding variable in yo...
Display Child Content by clicking parent Element in multiple listing
Hello Friends,
Today I have created a simple example of child element show and hide function in jQuery. Many times I found that we are facing an issue of showing child element of each list by clicking list parent element.
Here in jQuery code,...
Lets create jQuery plugin: part 1
jQuery have been widely used for interactive websites. There are plenty of plugins available built on jquery. We can also create our plugins. In this tutorial we will create a plugin and add few options.
We will create a jquery.myplugin....
How to change the label of a button on click event
Sometimes we need to change the label of a button on click event. Suppose you have button label as "Start" and you want to change that to "Stop" upon clicking start button.
Example: In the below example I've created a f...
JQuery Simple Scroll To Top
In this tutorial, you will learn that how to add scroll to top in any of the page. As we see in many websites the scroll top function. Its very helpful for users to go to the top of the page automatically without scrolling. It appears when the pe...
Simple and Responsive Sticky footer through CSS and JavaScript
Here I created a simple and responsive Sticky footer for any screen size or device. In this sticky footer, I used JavaScript code to get the height of document and footer.
I build this sticky footer to avoid the huge code packet and plugin fil...
Add HTML Content To div Using AngularJS
Hi All,
Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you ...
Sharing Data Between Controllers in AngularJS
Hi All,
To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object:
A simple example in which two controllers are sharing name of a user.
TEST.html...
Introduction to JCanvas
JCanvas: As we know that canvas is used to draw graphics with the help of javascript. In this there are certain properties to draw a line, circle, box, etc but canvas does not support event handlers.
JCanvas is a javascript library which is...
Create dynamic editable table with HTML using javascript
If you want to create dynamic editable rows in a table using html and javascript, below example will helps you.
In the below code first I have created a button and then created table in which I have added 2 columns, as the output is ...
Number and Number properties in javascript
The Number is a javascript object that represents numerical date, either integers or floating-point numbers.
The syntax for creating a number object is as follows:
var num = new Number(number);
If it receives a non-number argument, the...
How to set the height of two div equal dynamically using Javascript?
Hello reader's if you are developing the website in which data is generated in div and height of them is not equal then you can sort out your problem from this blog.
In the scenario above, sometimes text matter in the div is not ...
How does page redirection works in javascript?
Sometimes you want to notify your visitors of the change of the new domain name when your webpage is moved. At that time it is good way to place a “redirect page” at the old location which, after a timed delay, will forward visitors t...
How Javascript Cookies works?
Sometimes we need to store session information for different web pages. It is mostly needed for commercial websites where we need to fill up a form through several stages. So to maintain the session information across web pages and to keep track ...
How to disable back button of the browser using javascrpt
There are many cases where we have to disable the back button of the browser.
Here, the following code will help you to make your back button disable.
HTML:
<body onload="disableBackOnLoad(); ">
Now the back button is disabled
...
How to convert image into base64 string using javascript
Here is the example that shows converting an image file to base 64 string code. It can be done by the canvas method.
HTML5 provides the canvas tag that is used to draw a canvas.
For converting an image file to base 64 string you need to creat...
how to create modal in javascript
js-model is a library that allows user to work with models by using javascript code. This will help to user for creating a pop-up window for the further details. It contain the interactive data as well as a large part of the logic surrounding for...
How to integrate progress bar with Angular UI Bootstrap
How to integrate progress bar with Angular UI:
To use progress bar in angular, you need to include the following code in your controller:
Syntax:
<uib-progressbar value="" max=></uib-progressbar>
It has attributes like m...
How to convert Javascript Arrays to Comma seperated values
The toString() method can be used to convert an array into a string. It returs a result containing string and it will seperate the different elements in the array with commas.
var group = ['one','two','three','four'];
var conv = group.toS...
How to add, remove and check the class using angularJS
We can add, remove or check classes through our angular code:
The following is the syntax for adding a class and the corresponding CSS related to that class:
HTML:
<div ng-app="addRemove" ng-controller="myCtrl"&g...
