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 create JavaScript confirm Model
In the code given below, i have created a javaScript Confirm Model with the help of bootstrap. I also used document ready event handler to trigger the event.Confirm model without a callback isn't particularly useful,but it is entirely possible ...
Jquery Return false, event.preventdefault and event.stopPropagation
Return False :-
Basically returning false is a way to tell your action (like button click event, submit and load etc. ) is not firing. Return false do the three basic things
event.preventDefault();
event.stopPropagation();
Stops the call...
How to Dynamically add element in DropDownList?
I have created a dropdownlist with the help of Jquery and javascript. In this, when we will enter the text in the field given, that value will be stored and will be added to the next list dynamically. Also We can easily remove all the items by ju...
How to use Angular JS attribute in HTML.
Angular is the key to our apps. ng-app directive refers to module and ng-controller directive, which link our controller to our template. In the below example I have created a HTML program with the use of Angular JS attribute.
Review of these ...
Difference between the different services in AngularJS
AngularJs provide different services to organise and reuse the code multiple times in the app.
These are the two services:
1. Service
2. Factory
These services are singleton objects.
Lets Discuss them:
1. Service: Service are singleton ob...
How to use loading and saving data from the local storage
In below code, I have used a constructor shoppingCart for the parameter CartName which identifies the Cart while loading data from the local storage. I have also used clearItems() function which is used to clear the cart and saveItems which is u...
How to create window.prompt Method
With the help of this javascript prompt() function, I have created a dialog box that will be used for taking user input. The prompt() method displays a dialog box that prompts the user to input data
<!DOCTYPE html>
<html>
<h...
What is Prototype in JavaScript
Prototype in JavaScript
A prototype is nothing but an object from which other objects inherit their properties and every object in JavaScript has a prototype by default.
Objects in JavaScript is primitive data type which may be Nul...
File upload using ajax
File uploading is the basic requirement of web development. Many times we have to upload single or multiple files on our server then we can not upload big files using form submit. We have to use the in-build jquery plugins for the file upload. Th...
Two-way Data binding in AngularJs
AngularJs provides a very useful and time saving feature,i.e,Two-way Data binding. Two-way Data binding in AngularJs is a way to synchronize data between model and view. If we change something in the model, it gets updated in the view component a...
How to use Animated AJAX Record deletion in jQuery?
With the help of jQuery we can delete link for any record. On below code we have add a click event to triggers the ajax request. when the ajax request returns get success response.
$(document).ready(function() {
$('a.delete').click(fu...
How to show multiple items in a textbox, using auto completion in Javascript
"How to show multiple items in a textbox, using auto completion in Javascript"
In this article we will make a project that will select multiple items from the autocomplete list and display them in the textbox as tags using Javascript.
For ...
Prototypical inheritance in javascript
prototypical inheritance... We have used many different types of inhertance which are based on classes but today we are going to discuss the prototypical inheritance in javascript. It is based on objects, you can simply inherit one object to othe...
script for copy to clipboard
Copy to clipboard.. You can see this option in most of the blogs. You can simply click on the link and it will copy the text which set as target. Today we are going to discuss the implementation of this feature. We can see different ways to do th...
How to create Generated Keyframes in Javascript
Hello friends, I am sharing a generated keyframe with you . In this code I have set an animation on a DOM element . I have used insertRule for dynamically adding CSS and <style> tags for making it easier to remove the animation once the...
Difference between closest() and parents() function in JQuery
Hello all,
Working with JQuery, many times we tries to search a particular parent element which may be a specific HTML tag (like div, para any other tag), and to do this, JQuery comes with some built-in function which allows us to find the par...
How to Create Real Time Changing Clock
With the help of javascript we can create changing clock time function. In the example given below I am using setTimeout function (changed other value) when clock refresh it will show the exact time once in every seconds.
<html>
<hea...
JSONP concept
JSONP stands for JSON with padding. All the browsers follow the same origin policy. You can not send XMLHttpRequest to other domain. To prevent this security, we need to use the JSONP in ajax request. When we request a ajax call to the remote ser...
Google Maps JS API v3 - Simple Multiple Marker Example
You can simply use below code to show the multiple markers on google map.
var arr = new Array();
function initialize() {
var i;
var Locations = [
{
lat:48....
Get the device which is used by the user
Sometimes we have to write down the different scripts for different devices. Now a days most used devices are mobiles/tablets. If you want to get the device type which user is using then you need to simply add this script in your code and call th...
Email validation in javascript
If you are creating web forms then you need to put the validation in your form. We are here to discuss the validation for email. We know email address has its own structure. For eg. anytext@domain-main.com or anytext@domain-name.co etc
We are g...
How to copy text to Clipboard using jQuery
Hello Readers,
I will show you how to copy text in clipboard without using ctrl+c.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="jquery.zclip.js"></scri...
How to use Angular form validation on dynamically created elements
In the example given below, I have used ng -repeat for dynamically creating input boxes. I have also used ng-form directive that allows the nesting of forms that can also be used for partial validation .
<form name="mainForm" ng-submit=...
How to pass values from one div to another div in same page
Hello reader!
If you want to send the value from one div to another div in your same webpage, you can do this by help of JavaScript function.
Lets do this with example-
This is the div from which the value is taken
<div id='td1'>T...
jQuery .prop() vs .attr()
Jquery .attr():
Get the value of an attribute for the first element in the set of matched elements.
An attribute value may only be a string.
The attributes contains basic information along with some additional information about...
Writing jQuery document.ready in multiple ways
jQuery $(document).ready() is a basic part of using jQuery. Document ready event is a self-executing function which fires after the page elements have loaded. jQuery document ready is used to initialize jQuery/JavaScript code after the DOM is rea...
How to use controller inside the custom directives in AngularJS
Hello all,
Working with AngularJS, we can create our own custom directives that helps us to put our common html code in a separate html file and later on we can use it as a html tag, this helps us to make our code much more organizable and reu...
Foreach loop in javascript
If we need to use foreach loop in javascript then we can use jQuery $.each() function:
var data = [];
data[1] = "Mike";
data[2] = "Tom";
data[5] = "Harry";
data[12] = "John";
$.each(data, function( index, value ) {
alert( index + ": " ...
autocomplete function with php
Jquery is a powerful library and it is heart of web develepment. It includes different types of functions.
Today we are going to discuss function named autocomplete() which is useful to auto populate the suggestions as user types, filtering a...
jQuery Ajax POST with PHP
In jquery we have function named ajax() which have two arguments such as url and settings.
Settings are a set of key/value pairs that configure the ajax request. This argument is optional.
We are going to take an small example to understand the...
How to Create a Popover in Bootstrap.
With the help of Bootstrap we can create a popover function. In below example I am using title attribute which will specify popover header text and the data-content attribute will specify the text which will be displayed inside the popover's body...
JQuery find() vs children()
These methods are used to select the child node of the matched elements.
find()- A find() function searches the whole DOM (document object model) below the current node,i.e., search through the matched elements child, grandchild, great-gran...
Limit the Character Count in Textarea in Jquery
Hello Readers,
Here, I will tell you about the character limit on textarea using Jquery.
For Example, If the character limit to write on textarea is 100 character ,then we write only 100 character on the textarea not more than 100.
There...
How to make currency Filter in AngularJS .
With the help of AngularJS Filters method we create a currency filter function. In below example, We will first input two text box then we will declare first price of an article, after then will input quantity of article and finally get total pri...
Jquery stop() method
It stops the currently running animation for the specified element.
Syntax:
$(selector).stop()
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
&...
How to get mouse current position
According to my below code, when we will move the mouse to anywhere like left or right up and down we get the current status of the swipe. Here i have used mousemove() method .
$(function() {
//Enable swiping...
$("#test"...
JQuery aminate() Method
Jquery animate() method performs a custom animation of a set of CSS properties to change the state of an element from one to another.
It is to note that only numeric values can be animated (e.g. height: "100px"). String values (e.g. "background-...
How to Load a HTML Page Inside Another HTML Page in AngularJS
In this tutorial, we will learn to load a html page inside another html page, to do that we usually go for HTML iframe tag in which we can either set HTML file path or any URL from different domain in src attribute.
like:
<iframe src=&...
JQuery on() method
The on() method is used to attach one or more event handlers for the selected elements. It is designed to replace both the .bind() and .delegate() event handlers.
Syntax:
$(selector).on(event,childSelector,data,function,map)
where
...
Validations in Angular JS
Hello all,
We usually validate our HTML form before submitting it as it's a good practice to do that and to validate the HTML form we can use JavaScript Validation in client side, or we can also use custom JQuery code where we can apply differ...
Registering services using Service in Angular.js
Hello All
In today's blog post we would discuss the aspect of registering your custom services with AngularJS.
It is essential to understand what are AngularJS services.
Services:
Angular services are objects that are packed together us...
Registering Service using value in angularJS
A service is created by a service factory and service factories are functions which are created by a service provider(constructor function).
When instantiating service provider, there must be a property named $get, which holds service factory ...
Remove/add list using ng-click
Here is an simple example to add and delete list using angular ng-click
Html -
<div ng-app="nameApp" ng-controller="TitleCtrl">
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" ng-click="removeN...
How to sort a list items alphabetically using JavaScript
Hello All,
Working with HTML and JavaScript, many time we render html in our page with the help of JavaScript, like adding a list that has many list items.
To show that list in a alphabetical order (ascending or descending order) in our HTM...
Check if an element is visible in viewport
Hi Friends,
Many times we get into a situation where we want to know whether an element exists within a viewport of browser or not.
Here below. I am writing a function to check whether an elements exists in a viewport or not.
It will return...
Tutorial-4 AngularJS Controllers
Angular controllers control the data flow in application. Controller is defined by ng-controller.
We define all script, function in the controller, every controller have their scope which works as parameter and that controller is applied on thei...
Difference between Service, Provider and Factory in angularJs
Hello Everyone ,
In this blog we will discuss about the differences b/w services ,provider and factory in angular jS
a)Service-
This will return the actual function with an instance of the function.
Syntax-
module.service( 'serviceName',...
How can we resolve conflict between prototype and jQuery?
To resolve a conflict between jQuery and prototype, use below method
jQuery.noConflict
and using jQuery instead of
$('code').code;
jQuery.noConflict();
jQuery(function($)
// $ is the jQuery object in here
// and doesn't conflict ...
How to calculate characters inside html editor with JavaScript
Hello all
To calculate characters inside HTML Editor we can use following block of code:
In HTML side we have :
<div id="editorDiv" contenteditable="true" onkeydown="calculateChar()">
</div>
In JavaScript we have :
f...
Difference between setTimeout(), setInterval() in Javascript
In Javascript we can execute some code at specific time intervals. These are called timing events.
There are two methods that are used:
1.setInterval()
2.setTimeout()
setInterval() Method : The setInterval() method executes the function ...
