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
Drag and drop using Javascript
If you want to drag your element from one point to another, here is the code below using Javascript:
HTML:
<div id="dragElement">Drag me!</div>
CSS:
#dragElement {
width:100px;
height:100px;
background-color:#66...
How to create a basic plugin using jquery
If you want to make a functionality that can be used anywhere in the code. For example, you want some method that can be called on the jquery selection and it can perform number of operations on the selection. For this, you can write a plugin.
...
How to make HTML by using the Json Array
Hello Reader's
If you having the data coming from the Json array and you need it to show in html table. Then you can perform the short Jquery action for making it automated restful service.
Here the code of javascript
var _table_ = docum...
How to make the navbar tab active on click?
To make the clicked tab active in the navigation bar, the <li> corresponding to the clicked href in index.html introduces the css of 'active' class and removes the 'active' class from the previous <li> on click.
Example:
index....
What is the best place to load JS in html
Hello Reader's!, If you need to know which is the best place for putting the JS.
You can put the js functions in the head part. But it'll be a good habit to put all of your functions in a separate file. You can also call for the external script...
Display image before upload using javascript/jQuery
This post demonstrates how to display an image prior to uploading it on server.
This demo uses the JavaScript's readAsDataURL method of reader API which will read image as url.
<html>
<head>
<script src="https://a...
How to load header and footer using Javascript
Hello Reader's. If you have developed the header and footer of the website separatly then it's very easy to make them render on a webpage. By using the JS you can call them with a single line of code as written below:-
<html>
<head&g...
How to detect if web page is refreshed using Javascript
Hello Reader's! if you need to detect whether the webpage is being refreshed by using Javascript you can do this like the example below:-
function CheckRefresh() {
if(document.cookie.indexOf('mycookie')==-1) {
// cookie doesn't exist, ...
How to change image onmouseover event
Hello Reader!
If you are looking for a quick onmouseover event that changes the image over another image then you can use the following library code :-
<img src='FirstImage.jpg' width='120' height='70' onmouseover="this.src='SecondImage....
How to show copy, cut and pase action on website
Hello Reader if you looking for any script that makes user a notification whenever he cut, copy of paste data from your website then you can see how it is done below:-
This is the html page
<body>
<h1>jQuery copy, paste and ...
How to load a html page inside another web page using Javascript
If you have two html pages and you need to load one inside of another then using Javascript you can easily perform this action by 'load' syntax:
Lets consider two pages one.html and second.html
one.html will go like this
<html>
&...
How to take inputs as only digits using Angular JS
Hello Reader!
If you are designing a html form and wants to make it validate for accepting only digits as input then you can see the code below for the same:-
You can create the html form like this way:-
Validate Price
...
Example of ng show / ng hide in Angular JS
If you learning the Angular JS and use a parameter from an object as the expression then the ng-hide and ng-show are given the correct true/false but always remember these true/false is not like boolean so always return false:
Consider the examp...
How confirm and match the password fields on a html form
Hello Reader!, If you looking for a front end validation for matching the two passwords feilds with Javascript
then you can see how to get it done.
Lets consider the example below
Here i'm using the html code for the form
<form clas...
How to create conditional display using AngularJS
With the help of AngularJS, I have created a conditional display function. In the example given below, I have used ng-show( for showing the element ) and ng-hide( similar to 'display:none' or hide the element ) derivatives.
HTML-
<!DO...
How to use Angular JS attribute in HTML.
Angular is the key to our apps. ng-app directive refers to module and ng-controller directive, which link our controller to our template. In the below example I have created a HTML program with the use of Angular JS attribute.
Review of these ...
How to create window.prompt Method
With the help of this javascript prompt() function, I have created a dialog box that will be used for taking user input. The prompt() method displays a dialog box that prompts the user to input data
<!DOCTYPE html>
<html>
<h...
How to Create Real Time Changing Clock
With the help of javascript we can create changing clock time function. In the example given below I am using setTimeout function (changed other value) when clock refresh it will show the exact time once in every seconds.
<html>
<hea...
How to Create a Popover in Bootstrap.
With the help of Bootstrap we can create a popover function. In below example I am using title attribute which will specify popover header text and the data-content attribute will specify the text which will be displayed inside the popover's body...
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...
How to create Navigation Menu in AngularJS
In the example below, I have built a navigation menu. Here I am using Angular directives to set menu button, when I will click on menu button It will display just below navigation menu bar.
<div id="main" ng-app>
<!-- The navigat...
How to bind onclick event function in JQuery
In the example below, I have created a bind onclick event function. when we will click on the button, element will dynamically added to DOM and it will bind the click event only to the elements that exist at the time of binding. To bind the cl...
Tutorial 3 - AngularJS Filter
Hi all,
In angularJs filters are use to change and modify the data. We can use multi filter using pipe (|).
Below is some example of filters-
1) uppercase
2) lowercase
3) currency
4) filter
5) orderby
Uppercase :-
Uppercase fi...
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 ...
Formatting currency using Angular
Hi all,
Here is an example how to format currency using Angular filters.
Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used. - AngularJS
HTML:-
<body ng...
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 ...
Looping over list in template using ng-repeat (angularJS)
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. - angularJ...
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...
How to use upload files with JQuery
Here is the example for *How to use upload files with JQuery. *
If you having trouble with such issues, then use the below code.
Here is the HTML
<div class="flie-btn clearfix">
<input class="fileinput" type="file" name="d...
how to bind click event on dynamically created elements
Below is the example for how to bind click event on dynamically created elements.
If you having trouble with such issues, then use the below code.
Here is the HTML
<a href="#" class="button">Button</a>
<div class="lis...
AngularJS Controllers
AngularJS applications are controlled by controllers. A controller is a JavaScript Object, which is created by a standard JavaScript object called constructor. In below example lastName and firstName are two properties of controller object demons...
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...
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...
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 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...
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>
&...
Jquery Animation
Jquery animate() method is used to animate any element in the web page. It allow us to create custom animations.The syntax for this:
$(selector).animate({params},speed,callback);
The parameters of animate() mehod are:
The params parameter de...
Method eq() in jquery
Description:
The eq ( index ) method reduces the set of matched elements to a single element or we can say that
find the element that matches or equals the index provided.
Syntax:
Here is the simple syntax to use this method:
selector.eq ( i...
Preventing child element from firing on click of Parent element
Suppose, we have this html where div element have 2 child p elements and 1 child anchor element.
<div>
<p> I am para one</p>
<p> I am para two</p>
<a href="http:nowheretogo.com">I am a link<...
Delete a row from list on a click of a button
If you want to delete a particular list (li) from the listing, you can easily do this with the following code.
$('#demo ul li[rel="'+id2+'"]').remove();
<div is="demo ">
<ul>
<li rel="id1">This is just a demo....
Append tag using jQuery
If you want to append HTML in pre-defined HTML :
$("#detail").append('<div class="demo"><p class="modify">He has all the ability and a perfect attitude.</p></div>')
