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
Object-Oriented JavaScript
Objects are used to represent the real world entities in our code like bank account, books, person, etc, by storing all relevant information in one place, i.e, an object. We have two ways to create objects in javascript, i.e., 'Literal notati...
How to toggle font awesome icon in bootstrap accordion
If you want to use Font Awesome icons to indicate the open/close state with 'fa-chevron-down' and close(fa-times) icons in accordian then you can do easily i.e when you click on a heading of accordian the "fa-chevron-down&q...
Retrieving the selected text using JavaScript
In the example below, we have a textarea containing some text. When the user selects something using a mouse, we will check what user has selected. For that, we use selectionStart and selectionEnd properties of textarea, and we can get the select...
newstape in jquery
Today we learn how to make a 'scrollable newstape' using scroller plugin which help user to scroll a list of news with support of some events i.e mouse wheel, mouse drag.
Example :
HTML Code :
<Html>
<head>
&...
Two-way binding with NgModel in Angular2
Hello Readers,
In Angular2 we can do the Two-way binding and user can see the application data values. To show the data we uses data binding. In this post we will see how to implement Two-way binding in Angular2 application.
Two-w...
popup in jquery
Today we learn how to open a full screen popup with animation effects :
HTML Code :
<!Doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compa...
Use of @Output in Angular2 with demo
Hello Readers,
In today's blog we will discuss about @Output decorator in Angular2 component.
Introduction: Angular2 is totally based on component and written in Typescript. In Angular1 we are using Controller, $scope but they not lon...
Understand JavaScript Closures
JavaScript Closure is the inner function that the access to its outer function's variables. Closure has 3-scopes:-
1: It has the access to it's enclosing function.
2: It has the access to the variables withing its own scope.
3: I...
Serialize a form elements in jQuery
The serialize() method of jquery is useful when we have to send a query string to sever in ajax request.
It can encode all the form elements as a string by serializing the form values.
This method does not accept any arguments.
The .serialize(...
Merging An Array Using JavaScript
Hello reader's, Today in my blog I will discuss about the merging an array using JavaScript.
Basically the term “Merge” means to combine or join two array into a single array.
In JavaScript , for merging ...
multiple angular app in one page
While working in jsp with some parts common in few pages and ran into a problem to attach multiple apps to a single jsp page. After doing lot of search I found this one the best solution. Create a new app and take all other apps as an parameter. ...
jquery autocomplete in AngularJs not working on first click
Hi,
I was using jquery autocomplete functionality in angularJs using directive. Whenever I tried to load static data it was working fine, but when I loaded data from server side the first click was not working.
I was using code someth...
Object prototype in Javascript
Every javascript object has a prototype by default. And the prototypes is also an objects.
All objects in JavaScript inherit methods and properties from their prototype and we can override it, but we can not override an Object with a...
Creating objects in JavaScript...
Hey guys in this blog we are going to look at creating objects in JS, having properties and methods attached to them :
var car = new Object();//Creating a brand new object...
//Adding properties to the newly created object ...
car.Wheels =...
jQuery .bind() vs .delegate() vs .live() vs .on() Methods
Introduction
jQuery is a compressed and fast JavaScript library which can be used to facilitate event handling, AJAX interactions , HTML Document traversing and animated effects for the website development.
jQuery is a free open-source libr...
LightBox
LightBox is a plug-in we use to create image gallery with the image overlay effects. Like you must have Google for some images once in your life and on clicking on a particular image, the size of the image zooms out which we define as an overlay ...
How to change query string value on keyup of a text-box?
Let's suppose we have a situation where we want to change query string value of anchor tag href on text-box keyup event
Text-box keyup event is triggered when we release a key on the keyboard.
We are considering that our HTML page...
Converting a Decimal to a Hexadecimal Value
Hello readers in this blog we will discuss about the conversion of a decimal into a hexadecimal value. In this case if we have a decimal value. we have to find its hexadecimal equivalent, we use the Number object’s toString method :-
S...
How to change the font family using JQuery?
In this blog, we will see how we can change the font family of text through jQuery. In this blog we have two div in the left div we show the text and in the right section, we make a selectbox( ) from which we select the particular font whatever y...
Multiple Ways To Concatenate A string using JavaScript
Hello, readers . In today's blog I am trying to give multiple ways to concatenate a string using JavaScript.
Basically the term “Concatenate” means joining two or more strings and returns a new joined string .
&nbs...
Sorting an Array
Hello Readers! In this blog we are going to focus on the sorting method of an array in javascript. We use sort() method to sort the array in Javascript. The possible order in which an array can be sorted can be either in ascending or descending, ...
Converting Strings in a Table to Numbers
Hello reader's in this tutorial we will convert string in a table to a numbers, for doing this we have to access the values in a HTML table and for processing we have to convert into numbers.
Using the Document Object Model (DOM)...
Node.js Event loop
The event loop in Node.js works or runs in a single thread. That shows the application developer the code he/she will write that will be checked on a single thread. There are n number of threads which node js uses itself through libuv. But we don...
Validating Array Contents
Hello reader's in this tutorial we will validating the array contents. We want that array meets the certain criteria. I am using the array object's method to check every given element.
For example, the following code checks an alphan...
Applying a Function Against Each Array Element
Hello reader's under this blog we are going to apply a function against each array element. We are using a function to check an array value and if it matches a given value then it will replaced.
To attach a callback function to e...
Searching Through an Array in Js
Hello reader's in this tutorial we will find an array by searching. We will search an specific array's value and get the array element index if found.
We are going to use a Array object methods indexOf and lastIndexOf which is in the...
Creating a String from an Array
Hello reader's in this tutorial we are going to create a string from array. We will use array object method to join an array element into a string. The in-built join method will join the array elements into a string.
Syntax:-
...
Socket.IO using node.js and express
In node.js Socket.io enables real time event based communication. What that means is that we can communicate to the server from the client and in return the server can talk back to the client. Socket.IO uses WebSockets when it can and has fail ov...
Creating Marquee using jquery
Marquee is a text which is seen floating from right to left or left to right , top to bottom or bottom to top depending on the code . Before we can created marquee effect by simply using <marquee> tag of html as this html tag is not support...
Looping an Array in Javascript
Hello reader's in this blog we are going to discuss about looping, by using array we repeat the names inside a loop. Using loop is easy to access all the elements of an array.
By using a for loop, it is the common access to acces...
Appending a New Element to the End of a Page Javascript
Hello reader's in this blog we will discuss about creating a new element and appending to the end of the page. Some time you need to add a new element to the end of the page. We use the appendChild method to append the new element inside the ...
Difference between size() and length in Javascript
In jQuery size() and length property are the two features, which have the same property of returning the number of elements in a jQuery object which creates a lot of confusion for developers.
This blog is to help developers to understand the d...
How to make an http POST request in node.js
I have a situation in which I have to make an post http request to another server and get the http request data(If it exist) and then on the basis of data do further calculation. I have to also put the check that if there is any delay on th...
How to check a valid phone Number by javascript?
Hello readers, in this blog we will discuss how to check a valid phone number in the form. Sometimes you need to add the validation for the phone number which requires a certain format.
We have to access the value which is in the for...
Simple Calculator using Html and jQuery
Simple Calculator using Html and jQuery:
We can create a basic calculator using Html, Css and jQuery. When user will click digits then it will store in either crntStore or btnVal variable. When user will click a arithmetic operation button the...
How to get style information for an element with javascript?
Hello readers, in this tutorial we will learn about how to get style information for an element and set element style with one or more CSS.
Whenever you need to get information about style which is inline or via javascript and also n...
Creating a Dynamic Runtime Function
Hello readers in this tutorial we will create a dynamic runtime function. When you need to create a runtime function, in that case you do not know its structure untill the code runs. In this blog we will discuss about how to make a runtime functi...
Creating Chrome Extensions
Creating Chrome Extensions
Extensions are the way to add functionalities to browser without changing anything in the native code. It is actually very easy to write an extension. It requires only a basic knowledge of:
HTML
CSS
Javascr...
Node js Events
As we all know Node.js is a single threaded application in which we will heavily use event and callback. Events modules allows you to emits and handle events. In node.js there are n number of in-built modules that has the ability to emit or broad...
Node.js I/O blocking and I/O non blocking.
As we all know Node.js is a single threaded application in which we will heavily use event and callback. But before starting event loop we should know about events and cost of I/O & non-blocking I/O.So starting with event driven programming.
...
Making a navbar directive in AngularJs
Hello, reader's in this tutorial we will create a navigation menu with angular js. Angular js is a framework for dynamic web pages. By the use of Angularjs, we will create dynamic menus.
First, we create a folder for our application by any...
An Animated Radial Menu Using CSS & JavaScript
Hello readers, We all have seen various animated Navigation Menus but in my blog I have tried to create An Animated Radial Navigation Menu using JavaScript and CSS3 property.
In my blog , I have made a circular menu list items which ...
How to write basic query(find and findById) using node.js and mongoDb?
As in my previous chapter I have explained how we will authenticate using passport module. Now I will explain that how we will write basic query using node.js and mongoDb.
Here are the few query which I will implement step by step:
...
HTML 5 Drag and Drop
Drag and Drop feature allows a user to catch an element and drag it to any page or drop to some other location of the page. Earlier to use the feature of drag and drop programmer either has to create more complex javascript programming or use som...
Changing font-size using jquery
In this tutorial I am going to explain how to change the font size of text content in a paragraph dynamically using jquery. We can change the font-size using jQuery css() function.When page will load font-size will be 14px .When us...
HTML5 Audio element events
In the previous post HTML5 Audio element methods i have explained about the HTML5 <audio> methods. In this blog i will further explained the different events associated with the audio element.
Commonly used audio events are:
1. loada...
Aniamted SVG triangles
Hello reader's today we will discuss about SVG. SVG is a scalable vector graphics in which we can make a graphic for the web. In HTML5 <svg> element is used for the container of svg graphic. SVG is used by several method such as paths, ...
HTML5 Audio element methods
In the previous post HTML5 Audio element and its attributes i have explained about the HTML5 <audio> elements and its attributed. In this blog i will further explained the different methods associated with the audio element.
Methods :
...
How to create flip effect horizontally and vertically to show images and text?
Hello Readers , here is a simple blog on flipping effect horizontally and vertically using jquery flip() method on mouse hover. On mouse hover image will flip and we will see some text in a div having background color. ...
Sbiling in jquery with demo
It returns all the sibling elements of the element that you have selected.
It allows you to go through the siblings of the matched elements in the DOM tree and creates a new jQuery object from the matching elements.
Lets see how it works:
...
