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
Using TouchSwipe plugin in jQuery
If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop brow...
Get started with a simple TypeScript application
Typescript is Microsoft’s extension of Javascript. It provides type checking abilities and also has features of object oriented programming. TypeScript is used in both Angular2 and Ionic2.
TypeScript has similar syntax and semantics that a...
How to use jQuery Lazy Load Plugin
In this article you will learn about lazy loading plug-in from jQuery. It first loads your web page then request is sent to load the images of that page.
By using Lazy load plug-in you can decrease time for loading the page and also it can incre...
Understanding Custom Directives in AngularJS
AngularJs Directives are used on a DOM element like any attribute, name of the element, some css class or any comment. It tells AngularJS’s html compiler to attach any directive to DOM element. all data bind attributes with ng- are in-built...
webui-popover plugin in jQuery
It is a plugin with jQuery which can be used to show popover . It can work with bootstrap but it can be used without bootstrap. It requires jquery1.7+
It supports browsers IE8+, Chrome, Safari, firefox, Opera.
These are the features of this p...
Scroll Fixed Header in jQuery
In this article, you will learn how to fix the header all the time while scrolling your website page. There are different jQuery plugin available for this purpose but we will use a simple jQuery based solution to make a header fixed on the top of...
Adding Form Elements dynamically in Javascript
You can use JavaScript to add elements like textbox, button, radio button in a html form. createElement() method is used to create html elements at runtime.
Here is the example:
HTML:
<form>
<h2>Dynamically add element in fo...
DataTables: Table plug-in for jQuery
DataTables is a jQuery plug-in designed for creating flexible HTML tables.
It has following features:
* It provides Instant search, Pagination and multi-column ordering
* It has Supports for any data source like DOM, Javascript, Ajax and s...
The Architecture of an Angular 2 Application
In this post, we will understand the architecture of Angular 2 framework.
These are the modules that Angular 2 architecture contains:
Module
Component
Template
Metadata
Data Binding
Service
Directive
Dependency ...
What is Vue.js and Why Use it
Vue.js is a library of javascript that can be used to build any web application. It has MVVM(Model-View-ViewModel) architecture. It is easy to learn and also more flexible.
Here you will see how you can use this js in your application.
Adding...
Learn how to create a comment with word limit using jQuery
Hii,
In this blog, I am going to share an example in which i have created a comment box using few html tags like input box and text area and i have used jquery to set the word limit and to count the number of characters typed.
Go through ...
Disable Button and Submit button after one click using JavaScript and jQuery
Hello Everyone!!
As we know that when we are clicking the submit button then it send the data to the server, but what happen if we are not disabling the submit button after the one click then here is the some problem :-
&...
How to Validate File extension before Upload using Regular Expression in JavaScript and jQuery
Hello Everyone!!
In this blog, we are discussing the uses of the regular expression in the validation a file extension before uploading. Regular expression is a set of the symbol or character or both and it is used in many field but here we ar...
How to change default messages of data tables?
Hello Reader, If you are using data tables in your web website and want to change default message of it then in this blog you can see how to change them.
Now-a-days, Data tables are getting very popular because of its real-time instant s...
Finding index value using AngularJs
Hii,
To learn how to find index value from a given list of array element or to find the index value of filtered data using AngularJs.
Go through examples given below.
Example 1:In this example index value of the day selected from the drop ...
Create color picker using javascript without using any external link/library/plugin
Hii,
In this blog i am sharing an example of creating a color picker using javascript without using any external link/library/plugin.
There are many browser's addons tools and online tools available using which we can choose ...
Learn how to create a slider with animation effects using simple code of jQuery
Hii,
I had shared few example of animation effects using CSS and jQuery,This blog is continuation with my previous blogs on "animation effects" using CSS and jQuery
Learn how to create a slider in html with different animation eff...
Difference between event.stopPropagation(), event.preventDefault() and return false
We have many times have listen about event bubbling in javascript which propogate an event from child element to parent element.
So, to avoid such event bubbling in our page we use event.stopPropogation or return false. Also there is a new thi...
Difference between window.onload and document ready
There are some minor difference between the two but it can effect with lots of confusion between to many of us.
window.load - It is fired when everything on the page is loaded. By everything I mean that when the DOM is loaded, when all t...
Understanding AngularJS Bootstrap Process
Bootstrap process in angularJs is simple and you should know about it. There are two ways of bootstrap process in angularJs:
Automatic Bootstrap
Manual Bootstrap
Automatic Bootstrap:
When we run our angularJs App the DOM(Document Ob...
How to increase and decrease the date by one on click using js?
If the user wants to increase or decrease the date by one, on click of a button, he can easily do this by using the following code.
HTML:
Date: <input type="text" class="dateone" id="datepicker">
<input type="button" onclic...
Understanding Data Binding in AngularJS
In this post, you will learn about the data binding in angularJs. It is one of the powerful feature which angularJs provides.
There is two-way data binding in angularJs to bind data between model and view.
The data binding mechanism is handle...
Using href link values inside your select box
In this post, you will learn how to connect select box option with the anchor tag link.
Sometimes you want to change the select box value like an anchor tag with the refresh of page. Lets understand this with an example.
If you have select bo...
Onkeypress Enter focus Input field
Hii,
In this blog I am going to share a javascript code using which we can create a form in which user can fill data without using mouse to move from one input field to another.
You will see that on keypress enter focus will move to next inpu...
Disable the control(ctrl key) plus click event for a particular click with demo
There are many cases where we do not want our page to open in another tab while clicking ctrl+click and the anchor tag is producing dynamically.
For that, we can add the following script which will disable the same effect.
$(funct...
How to check if the scroller reached at the bottom of the page with demo?
There are many techniques through which we can place an event when the scroller reaches the bottom of the page.
If the user wants to play an event when he reach the bottom of the page, he can do the same with the help of the example below:
...
Scope in javascript
Hii,
In this blog i am going to discuss about scope in Javascript and how we can use it.
Being a JavaScript developer one should have proper knowledge about JavaScript scope.
JavaScript scope specifies objects,function and set of variabl...
How to add a video as background of your website
Hii,
While designing a web page our main motto is to design the web page beautiful and attractive with the help of CSS.
Here is one more option i.e to add a video in the background of a webpage to make it more attractive and beautiful.
Addin...
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...
Create amazing charts and graphs with angular-fusion-charts
In this post, you will learn how to use fusion charts and graphs in angular. There is a plugin for using fusion charts in angularjs. you can add this plugin and use it for web or mobile applications.
Features of this plugin:
It will add ...
How to crop images using Angularjs with example
In this post you will learn about cropping images using Image Crop directive in AngularJS. This directive provides you the feature to crop any image in a circle or square shape.
You just need to have angularjs to use this directive. To start wit...
How to use modal popup in Angular UI Bootstrap
Angular UI Bootstrap provides $uibModal service to create modal windows. Before using this you need to create a template, controller and reference them with $uibModal service.
It has only one method i.e. open(options).
$uibModal's open ...
Transition of a div on click event using Jquery with demo
Hello friends,
If you want to make an animation like transition on your multiple views or If you want to slide your view i.e. your DIV element from one to another, you can use the following code.
In this we have all the content in...
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
...
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...
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:
...
How to make only digits validation for textbox using Jquery
Hello Reader's! if you are making the html form in which some textbox you only want as taking the digits only. Then in this blog you can learn how to make this digit type validation. Since now most of the website are providing the frontend ty...
How to show show the text data from a file into website using ajax
Hello Reader's if you are making the website in which you have to fetch and show the content data from an external file then in this blog you can see how to do it. In web technologies different technologies offers you many ways to do this but...
How to set fomr action on two submit buttons using Jquery
Hello Readers, if you are developing the html form with two or more submit buttons then in this blog you can learn it. On certains conditions a html form should have multiple submit buttons and both should redirect user to their individual ...
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 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...
How to populate options in select in angularjs with example
The dynamically generated option in the select box with angularjs is done with the following code :
We can populate the options inside the select box and on selecting any value from the select box it reflect to some event. It will sh...
Javascript:Exchanging data between a document in an iframe and a parent document.
Hii,
I am providing a very simple javascript code by which we can access variables and invoke functions in the parent document and vice-versa.
Please go through the given example below and understand the concept.I hope it will be...
How to change data on changing the option box
Hello Reader's if you are looing to develop the html form which changes the data on changing the values in option box, then in this blog you can see how it is done.
To making this form we will start from html file. And its code will go like this...
How to make simple ToDo section in javascript
Hello Reader's if you need to develop the todo section in your website where user can create the lists and mark then when they are complete. Then Javascript is the best option for you.
Lets see it's working code as below:-
The html file will ...
How to make switch between thumb and list view using Javascript
Hello Reader's if you are making the website and you want to create a switch which convert thumb view into listing and listing view in thumb view then you take the help from the code as below:-
Here is the html page and code will go like this:...
