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
Simulating click event in Javascript or Faking Javascript click event..
<script>
function fakeClick(event, objId) {
var obj=document.getElementById(objId);
if (obj.click) {
obj.click()
} else if(document.createEvent) {
if(event.target !== obj) {
var evt = document.createEvent("MouseEven...
Handling Child Javascript Window Close events
More often than not you want to create a child window and want to capture its events. This example simply captures its close event.
var childWindow = window.open("new.html");
function doStuffOnUnload() {
alert("Child Windows Cl...
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...
Scaling of entities in ImpactJS
How to use Scale plugin in ImpactJS ?
In the lib folder create a new folder named Plugins and put the "scale.js" plugin in to this folder.
Include the plugin to the requires in any entity.
.requires('Plugins.scale')
Now if we want t...
How to fetch data from server using AngularJS
To fetch the data from remote server we have to make the ajax request to the server which will return the data in our desired format, and to do that in AngularJS we can use $http service which helps us to communicate with remote server.
To imp...
How can I make a redirect page using jQuery?
To redirect page using jQuery we can use the various methods such as
In JQuery we can use location object which as multiple attribute such as host, hostname, href, origin, protocol etc, and we can set the href attribute to our custom URL, w...
How to make Numbered and bulleted list in HTML Editor with JavaScript
Hello all,
Working with HTML Editor we wanted to give a functionality to user where he can select any element from the html editor and can convert it into Numbered and Bulleted list.
We added this functionality by following these steps : -
...
How to validate dynamically genetrated form using javascript
If you want to validate the dynamically generated form using javascript:
You can use this code :
HTML :
<div id="example">
<form id="newForm">
<input type="text" name="email" id="email" value="mail" /&g...
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...
Difference between attr() and prop() in JQuery
Many of us uses JQuery.attr() and JQuery.prop() and get the same result, as there is a small difference between the two.
Lets discuss it one by one.
JQuery.attr() :
It generates the value of an attribute for the first element in the set of m...
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 Get height width or element using Jquery
Hello reader's,
Below is the example for Getting height width or element using Jquery
If you having trouble with such issues, then use the below code to resolve such issues.
Here is the HTML
<button id="dummy-height">Get div Heigh...
How to add Table in HTML Editor with JavaScript
Hello all,
While working with HTML Editor, we wanted to add a functionality by which user can create table inside the HTML Editor by just clicking the button.
We added this functionality by following these steps :
1.Firstly when user cli...
How to unlink the selected link in HTMLEditor
Hello all,
While working with HTML Editor, we wanted to give a functionality to user where He/She can selected a link inside the HTML Editor and he can Unlink it.
To do this, we have this block of code.:
var current = window.getselection...
Application is getting stuck when changing numbered or bulleted list.
Hello all,
While working with HTML Editor I faced an issues that, Application was getting stuck when changing elements with contenteditable="false" to numbered or bulleted list.
To change a multiline into numbered or bulleted list, we gene...
How to avoid horizontal scroll in HTML editor
Hello all,
working with HTML Editor, i came across to situation where we getting a horizontal scroll bar when we enter data in the numbered list line having width higher than the Editable Div.
To solve this issue we have this block of code....
Jquery Chaining
Jquery Chaining:
Till now we know that Jquery statements are executed line by line i.e one line after the another, but there is a technique that allows executing multiple Jquery commands in a single line just one after ...
jQuery Filtering
jQuery Filtering:
When we have to select a specific element out of various given elements filtering is required.
In Jquery there are some filtering methods divided into two groups:
1. Methods that s...
How to resolve the conflict between Jquery and JavaScript framework
jQuery-noConflict():
In order to resolve the conflict between Jquery & any other
JavaScript framework that also use the '$' sign as a shortcut the jQuery team implemented a
method called the noConflict() met...
document.ready() v/s window.onload()
document.ready() v/s window.onload():
Most of us think that document.ready and window.onload is one of the same thing the only difference is that window.onload is used in javascript while we use document.ready in Jquery...
Jquery EventListener
EventListener in Jquery:
We use addEventListener() method to attach an event handler to an element in Jquery.With the help of this method we can add as many event handlers as we want to an element without
overwriting...
jQuery Callback Functions
Callback function in Jquery:
Callback function is a function which is executed after the current function (i.e the currently running function) has been executed.
As the name signifies Callback f...
Closure in Javascript
A closure is a technique which helps us to access the variable of other function even when they are out side the scope of the calling function. We can also say that it has access to the outer functions private variables.
Example : The pri...
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()...
Services in AngularJS
AngularJS within it self provides many services that we can use in our application, such as
$http,
$resource,
$route,
$window,
$location etc
These Services are nothing but javascript functions defined inside Angular JS and they...
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(/[\]]/,...
Changing URL parameters using Javascript
More often than not we need to change URL parameters sometimes for Hash tags and sometimes for creating url parameters for creating new clickable URLs..
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])"...
Get current date ,time, year, month, weekday using JavaScript
This example will help a user to get the current time,date, day, month and the year.
Here we have used JavaScript Date class and the following methods of Date class.
getFullYear(); getFullYear() returns a four-digit number
...
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.
...
Identifying the browser with the help of Javascript.
We can easily identify the name of the browser, with the help of "JS navigator".Here we have used the "window.navigator" object that contains information about the visitor's browser.We can write "window.navigator" object without the "window" pref...
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 disable previous dates in datepicker using JS?
Here the problem is you want to show the passed dates but make them disabled.
jQuery(document).ready(function() {
$('#sandbox-container').datepicker({
format: "dd/mm/yyyy",
clearBtn: true,
minDate: 0,
maxDate: "+1M +10D",
da...
How to substitute one variable on another in Angular JS?
Let's say I'm using 2 arrays
$scope.city = [];
$scope.state = [];
now you need to swap the two array,
I'm using (angular.copy). Here's the logic, first copy one variable into temp and put value of second variable into first. now put ...
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;">...
HML5 Canvas Curves
HML5 Canvas Curves
1. Canvas Arc
Creating Arc HTML5 Canvas, by using arc() method.
HTML
<canvas id="myCanvas1" width="578" height="250"></canvas>
Script
<script>
var canvas = document.getElementByI...
How to install Express.js in Ubuntu
Express.js is a framework that is use in the Node.js. It is having the Jade file which is similar to HTML file.
To install Express first we have to include the express version in Package.json file.
Inside Package.js
{
"name": "pong",
...
How to establish connection using Socket and Node.js
Hello Readers,
The most important thing to use Node and Socket is to make connection. For this we should have two files one is Client.js(i.e. Client Side Javascript file) and other is Server.js(Server side javascript file).
Under Client.js ...
