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
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...
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...
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...
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...
Routing in AngularJS
Hi all,
Here is an example, how to use Routing.
We can use .config() to configure $routeProvider and in the same file we define two controllers firstController and SecondController. Usually these controllers holds a lot of logic but for ex...
How to Create a Responsive Image Slider in jQuery
By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.
Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&l...
How to use getElementById() method in javascript
In the example given below document.getElementById returns a reference to our HTML element myText. We store this reference into a variable 'myTextField', and then use the 'value' property, that all input elements use to grab the value.
<scr...
What is Bootstrapping in AngularJS?
Hi all,
Bootstrapping is the equivalent of starting, or initializing your Angular app. There are 2 ways to do so.
First :-
<html ng-app="appName">
-
-
</html>
Second:- After creating your app, you should use this when ...
How to use RouteProvider in AngularJS
With the help of Routing method we can divide our application in logical views and bind different view to controllers". In below example we have use first config() method to define $route Provider configuration. Also in the same file we defined t...
How to use Generic bind() Function
Here's an example of a generic bind() function, applied directly to an anonymous event handler. The object in XML Request gets bound to its onreadystatechange() event. The search string variable is being pre-applied as well. when the parseMes...
looping list using ng-repeat
Hi folks,
The below example will demonstrate how to do looping over lists in templates using ng-repeat.
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
...
Initializing the model using an Angular controller
Hi all,
Below example will demonstrate, How to Initializing the model using an Angular controller, defined with a global function.
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js ...
How to Update Marker position on google map
By using this function when we will click on Marker, its location will be shown on tha map. Here we have a function , first we will create "infowindow" object outside the function (global scope), then we will make infowindow objec constructor...
Clicking on marker generate popup on google map
By using this function, when we will click the marker, a popup will be shown on map. Here we have a function , first we will assign the content to a string name, then we will pass that value to the function .
Watch below:-
function initializ...
Fetching JSON using angular JS
The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the countries.json end point is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the ...
Rollover with a Mouse Event
With the help of JavaScript and html we create a "Rollover with a mouse event" function. Here we have two images. when we place mouse over image(1), the image(1) changes to image (2) and when we move the mouse away from that image, the original i...
Change Browser URL without reloading using JavaScript
This will change the browser without refreshing and reloading page. In this code I have used four buttons for calling a function to changeUrl concurrently this function will also accepts the page Title and URL as parameters .
Below is th...
Difference between shift(), unshift() and push(),pop() methods
Writing a JavaScript code in correct approach can be fun instead of terrifying. In this tutorial we will see shift(), unshift() and push(), pop() are the methods of JavaScript that allows us to add remove elements.
Lets discuss all these m...
How to use Filter in Angular JS
A filter is used to format the value of some expression when it is displayed to the user. It can be think as selecting the elements from an array in a particular format and returns a new array.
It can be used by the following ways:
In HTML ...
Ajax call using Javascript and JQuery
Ajax :
It is s process of getting or reteriving the content without refreshing the whole page.
We can do this using javascript and JQuery.
There are different method for ajax call in javascript and jquery.
Javascript :
<script...
How to append/add set of input field in a form with just once click?
I designed my form with writing this script below. In this script showing $(wrapper).append() will trigger the action of adding the input boxes or any thing that you put inside it. For ex I used name, email and phone input text boxes. All you ju...
Select multiple elements with same ID using JQuery
ID's in HTML are generally used as unique identifiers for the elements present in the DOM but it is not a compulsion to have only one element with a unique ID, which means you can have multiple elements with the same ID.
JQuery selector $("#id...
How to fetch server data into a div using jquery
Hi,
in this blog you will learn how the load function in jquery, Used to fetch data from any server to any web page using selectors.
<p><script>
$(document).ready(function(){
$("button").click(function(){
...
How to hide particular div with just one click?
Hi,
you want a condition in which the particular div, para or any other tag need to be disappear with just a single click see my code written in jquery as simplest.
<script>
$(document).ready(function(){
$("p").click(function()...
Randomization of the colors
Web color can be expressed in hexadecimal , or as RGB value. With the RGB value, each color is represented as a number between 0 and 255. The example demonstrates one technique to generate a color, using one function to randomly generate the numb...
Kendo UI : Creating a data grid
This series would be introducing simple examples of the widget along with the problems and the solutions that were used during execution of a project.
Kendo UI is a set library extended from Jquery developed and managed by Telerik.com.
It h...
How to Add/Remove multiple classes in Jquery
If you want to remove mutiple classes on click of a button:
HTML:
<div class="container">
<span class="class1 class2 class3"></span>
<button id="clear" type="button"></button>
</div>
JS:
$("#cl...
How to extract parameters from query string using Javascript or Jquery
Well my previous blog was on how to replace parameters in query string of a uri, this one simply gets the param value from the url..
function getParameterByName(uri,paramName) {
paramName = paramName.replace(/[\[]/, "\\[").replace(/[\]]/,...
Socket.io event handlers.
Hello Readers!
If you are creating any real time web application then node.js with socket.io is very worth for it. It connects client to server very easily with no time. Perfect example of node.js and socket.io is a Chat application or online ...
How to save my Offline Data in web applications
Since introduction of Offline storage in HTML5 many new trends have been started by storing persistent data locally on users system for future use. This leverages browsers and users system's capability to store data locally for offline usage.
...
Difference between addEventListener and onclick
Both onclick and addEventListener javascript function will work but sometimes it creates problem for developers to understand what the exact difference of these two's are.
var h = document.getElementById('a');
h.onclick = function1;
h.onclic...
How to trigger an event using Javascript "addEventListener()" method.
Hello Readers,
Their are many ways in javascript and jquery where we can trigger an event using Id or Class. Here's the example of how we can trigger the event using "addEventListener()" method.
Let's suppose we have have button having id="...
10 Javascript features you would love to know
Every language has some features which are known to or are used by less number of people but that does not mean they are not of any use. They can come handy in certain situations. Below is a list of some such features of the most widely used lang...
How to get selected drop box text
Normally when we select a value from drop bax then we get the value of option. Here when we will select a value of option then we will getting text of option.
SO to get selected drop box text use below code example-
Javascript
function get...
Disable slider from ratchet
If u are using ratchet.js to slider many images and you want to destroy browser method when we drag/touch page to left .It will turn to next tab .
If you want to click an element button than trigger the 'slider' method..
so it is best if you u...
How to get HTML structure using document.getElementById
Hello Readers!
In almost every web application their will be a need of javascript function "document.getElementById" , lets understand this how it work.
Say suppose We have this HTML structure
<div id="scores" style="display:none;">...
Swapping Z-Indexes of Entities in Impact JS
Impact JS keeps all entities in an array in the order of their creation. The main problem is that it is also the order of their z indexes. So the entity at the last index of array is at the top of every other entity. But in our games we get some ...
Using Local Storage In HTML5 - Capable Browsers
What is Local Storage in HTML5 ?
The Local Storage is a client side web storage database which is used to store the data in the form of key/value pairs.
Using Local Storage, we can store the data of at least 5MB.
It provides javascript bas...
How to call a function from string in Javascript
Hi,
Generally, there are two methods to call a function from a string.
Using eval.
Using window object.
First solution is using **eval**. It is easy to use but generally real programmers avoid to use this.
Example 1 without arg...
How to Create and Retrieve Array in Javascript?
If you want to store multiple values in a single variable javaScript arrays are used.
There are few ways to store values in array in javascript which are mentioned below.
First way:
HTML:
<div id="fruitList"></div>
Javasc...
How to make simple calculator with the help of Angulor JS
This Script will helpful to make a simple 'addition' 'subtraction' 'multiplication' 'division' calculator with the help of Angular JS.
<!DOCTYPE html >
<html>
<head>
<title>Angulor Calculator</title>
&...
How to add list dynamically
This is very simple way to add list dynamically using jquery. In this first you have to give Id to select tag then add the script.
<html>
<select id="memoryCategories">
<option>Categories</option>
</select&...
How To show Rating (Angular.js)
How to show Rating Dynamically
If you want to show rating dynamically you can follow the code below. Here phone.rating contains rating and it comes dynamically.
<html>
<div class="rating-block clearfix" funboard-rating rating-va...
Creating CSV from HTML using jQuery
In one of the project, I needed to create the CSV file from the html using jQuery.
To make this possible, I created the below code to convert the html into csv file using jQuery.
<script type="text/javascript" src="jquery.min.js"><...
How to export data to csv using javascript and jquery
Sometimes you face the problem to export the data into csv file using clientside platform. In this case you can use javascript and jquery.
Below is the code to find out the solution:
Javascript Code:
$(document).ready(function () {
...
How to install meteor on windows
Meteor is a new javascript framework which is designed to simply the web development and automate the process. The best feature of meteor is real time communication. It acts in real time.
Installation of Meteor on Windows:
Download nod...
How To Create A Simple Animation With The Help Of Jquery
Simple Animations With The Help Of Jquery
You can slide elements or any content of HTML and even stop animations in mid-sequence. To slide elements up or down.
$("#Element").slideDown("fast", function() {
// For slide down
...
