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
Promises in Angular.JS
Promises in Angular.JS
By using Promises we can execute a function asynchronously. we can use promises to specify what to do when a operation is success or failed. We have $q built in keyword in angular js for promises. let's create a exam...
not( ) selector jquery
not( ) selector is used to modify the attributes of those who does not match the given selector. It prevents us from complex coding as we can manipulate properties of those which does not match the provided set of elements.
As shown belo...
Blocked loading mixed active content
Blocked loading mixed active content
Hello friends, I was getting warnings in my console and script is not working fine. Please have a look at the screen shot below. I am getting following errors in console:
What I w...
Adding css property using jQuery
Hii All ,
Jquery is a type scripting langauge created by John Resig along with his team in 2006.
It is a client side script programming language.
It is a concise javascript library.
Both javascript and jquery is used for script progra...
Javascript arrow functions
From the long list of new elements balanced for appropriation by JavaScript in ECMAscript 6 (the principles collection of JavaScript), one that truly emerges is JavaScript bolt works. A moderate's optimal structure element, bolt capacity'...
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:
...
has event( ) jquery
it helps in reducing set matched of elements to those that have descendant to the matched set of values
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>has demo</title&...
Sticky header using jQuery and CSS
A hot pattern in web plan nowadays is the utilization of sticky headers, where the top part of a page containing key components, for example, the menu bar once looked past gets to be settled on the page, keeping on staying obvious. The accompanyi...
Get Timezone Offset in String format Javascript
Get Timezone Offset in String Format Javascript
Hi Friends,
If we want to retrieve timezone in string format like Asia/Calcutta or America/New_York in javascript. Javascript's method getTimezoneOffset() just return the...
jQuery Callback Functions
JavaScript codes are executed line by line. However, the next line of the code can run even though the effect of the first line of code is not finished. This can create errors.
To prevent this errors, we can create a callback function. callbac...
add( ) event jquery
add( ) event is used to add elements css to the matched set of elements.Through dis we can change the css and add add text to the matched set of elements.It helps in making site more user friendly and interacting.
<!doctype html...
Disable browser back button using JavaScript
Hello Readers! Here is a small blog on how to disable the browser back button. Although it is not advisable to use such tricks in websites as restricting or disabling the browser back button can be annoying for users who might wish to go back to ...
How to implement facebook login/signup functionality.
Implement Facebook Login/signup functionality by creating facebook sdk app.
Followings are the steps to create facebook login/signup functionality on server end :
1) Login with facebook developers .
2) Create an app , Put your doma...
Loader with css and jquery
Loaders are most frequently used in web-applications or websites. Here this blog shows the enabling of loader image from Jquery and closing the loader image with an overlay from code-behind. Generally, Loader image is used when the event takes so...
removeClass( ) event
removeClass( ) event is used to remove a particular class from an element on a particular event as mouseenter or mouseleave.It helps in making site more user friendly.
<!doctype html>
<html lang="en">
<head>
...
How to refresh a part of page automatically?
Many time you need to refresh your page without reloading the whole page.
Some time you need it to be done automatically after a certain time.
You can do it by ajax and jquery.
Here i am writing a function which will refresh div afte...
mouseover and mouseout event
The mouseover event fires when a pointing device points over an element.
The mouseout event triggers when the mouse pointer leaves the element.
In Html-
Syntax:-
<element onmouseout="myScript"&g...
Stylish tool tip display on hover of an element with the help of jquery
How to use stylish tool tip on hover of an element with jquery
To use the jquery basic tool tip you have to first include the following basic jquery file with another two. One will be use for jquery tool tip effect and other for tool tip css...
add class event
add class( ) event is used to add class in a element during run time.It helps in animating designs.Through this we can change the property during run time.
<!doctype html>
<html lang="en">
<head>
<meta cha...
Sidebar slider using javascript
On clicking a button a sidebar will be shown. This can be created by using javascript.
Below is the simple code of displaying a contact form on click button.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sl...
Change the form action before submit
How to change the form action before submit on the basis of element/input field click.
The html sample code for form having radio button and submit button :
<form action="" id="myformID">
<input type="radio" name="ch...
eq event
eq ( ) method in jquerry is used for indexing purpose.Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of thi...
How to toggle class dynamically using jquery
There are many times when we need to toggle the class dynamically.
Some time for changing the css.
Some time for adding html.
Some time to display html.
Some time to change dom.
That is all depend on your need. Now here I have trie...
Difference between location.href and location.replace
There are several methods in javascript for redirecting a user to different page in the current browser window.
Two of them are as follow
location.href
location.replace
location.href:- If we use following script then the user will...
How to change the background of a html randomly and dynamically
We can change the color of the background of the body and of any part let the part be header or div. It can be anything.
We can change the background color of the html using the jquery in our html.
For that first of all we have to include t...
Bind method
Bind method is used for attaching an event handler to a document.As shown below click,double click,mouse enter, mouse leave are event handlers directly attached to the document.
<!doctype html>
<html lang="en">
<head>
...
Possible days in a date range using Javascript
Possible days in Date Range using Javascript
Hi friends,
In some cases we try to build a logic where for a case where we need to find all the possible days that are possible inside a date range for any use case like scheduling a meetin...
Background Color Change Randomly in javascript
In javascript you can change the background color of HTML page,It is very simple to understand.
Example:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="backgroundcolor...
Node JS Installation and Create Your First Application Using Node JS
Here we are explaining about Nods Js features and how to create your first application using Node JS.
Node.js is a popular open source platform . It work in run-time enviornment for developing server-side web applications. Ryan...
Making a draggable element using jQuery UI
Earlier using javascript code to make an element draggable was very hard and moreover cross-browser version working of code was very difficult.
The following code shows how to make an element draggable inside its parent element by using ...
$scope vs $rootscope
Scope is an object which is used to access the properties and methods defined in a controller. Every application has single root scope.
Though the difference between scope and root scope the availabilit...
delegate and undelegate method in jquerry
delegate() method attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. The undelegate() method is a way of removing event handlers that have been bound us...
How to make a simple timer in angularjs
Hi all,
We are going to implement count-up timer. In Count up timer, timer starts from 00:00:00 to time you defined. It is used to show duration for example video duration , call duration , etc
In Html file , Just add binding variable in yo...
Display Child Content by clicking parent Element in multiple listing
Hello Friends,
Today I have created a simple example of child element show and hide function in jQuery. Many times I found that we are facing an issue of showing child element of each list by clicking list parent element.
Here in jQuery code,...
How to draw radius around a point in Google Map?
Draw radius around a point in Google Map
I want to add 10 miles radius around each marker. This is a very good example which will explain you how it works : https://www.freemaptools.com/radius-around-point.htm . This example will show you that...
How to create circles on Google map?
Draw a circle - Create a circle on a google map
Following javascript code will create circles on the map and it will represent populations in respected town. For that first you need to create an object containing latitude and longitude and pop...
Google Map driving direction
How to display the directions between to locations in google map?
The easiest way for adding driving directions to the webpage is to create a map and then create a DIV for the directions panel, and fire off a query to it!
Here's a very ...
How to add click event on marker in Google Map?
I was facing issue while populating markers and adding click event on them. When the user clicks on a marker I would like it to send the user to different webpage. For example: If marker represents home page, when you click on this marker it will...
Google Map v3: How to calculate distance between two end points?
Google Map v3: Calculate Distance
How to calculate distance between two end points in google map v3?
Use the Haversine formula to calculate distance between two end points.
Note: you must add &libraries=geometry to your script source...
Lets create jQuery plugin: part 1
jQuery have been widely used for interactive websites. There are plenty of plugins available built on jquery. We can also create our plugins. In this tutorial we will create a plugin and add few options.
We will create a jquery.myplugin....
How to parse \n character received from server in text output and display it to the view using Angular
While working with AngularJS, sometimes when we are receving data from the server and that data contains a string which has line-seperations in it in the form of \n, the angularJS is not able to parse \n and thus we see the entire string in one l...
Stop Event Propagation on click in AngularJS
Sometimes you have a click event on parent div as well as child elements of it. If you click on the child element, it automatically calls the parent click function along with its own function. This is called event bubbling. To restrict or stop th...
How to change the label of a button on click event
Sometimes we need to change the label of a button on click event. Suppose you have button label as "Start" and you want to change that to "Stop" upon clicking start button.
Example: In the below example I've created a f...
How to remove markers from Google Maps API?
Remove markers from Google MAPS API v3:
I was facing issues while removing all the markers from the Google map API. I know how to remove markers in Google Maps API v2 by :
map.clearOverlays();
Now the question is how to remove markers ...
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...
JQuery Simple Scroll To Top
In this tutorial, you will learn that how to add scroll to top in any of the page. As we see in many websites the scroll top function. Its very helpful for users to go to the top of the page automatically without scrolling. It appears when the pe...
Simple and Responsive Sticky footer through CSS and JavaScript
Here I created a simple and responsive Sticky footer for any screen size or device. In this sticky footer, I used JavaScript code to get the height of document and footer.
I build this sticky footer to avoid the huge code packet and plugin fil...
Add HTML Content To div Using AngularJS
Hi All,
Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you ...
Sharing Data Between Controllers in AngularJS
Hi All,
To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object:
A simple example in which two controllers are sharing name of a user.
TEST.html...
How to disable select box if no option is set using Jquery
Hello Reader's if you have desing the html web form where you want to put the select box dissable if no option is selected.
So let's start with the html form and its code will go like this:-
<form name="sell" id="sell" method="...
