Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
Tags
Alert classes
how to make alert messages in bootstrap.
Bootstrap prvoides an predefined class .alert for creating alert messages which can be customized according to the requirement.
Alerts are created with the .alert class, followed by one of the four co...
HTML5 - SVG
SVG is used for graphs like Pie charts, 2D graphs in X,Y coordinate system. It stands for Scalable Vector Graphics and it is a method for describing graphics in xml and then xml is rendered by SVG viewer.
Using SVG in HTML5:We can use SVG by <...
Multiple Style Sheets
When Style sheets are effectively merged into a single style sheet in the order in which they appear in the HTML source is said to be Multiple style sheets.If some properties have been defined for the same element in different style sheets, tha...
html5 new input attribute- Part 2
Hello
This blog is in continuation with my previous blog about the html5 input attributes.
Here is the link:
html5 new input attribute
1)FORMMETHOD
This attribute is used for submiting data to the given action url overriding the metho...
Non-Semantic Elements and Semantic Elements in HTML5
Non Semantic Elements:- Traditionally, developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content. It tells nothing about its content. The element has no special meaning at ...
Html5 new input attributes
1)AUTOCOMPLETE:- AUTOCOMPLETE attributes is having two features either on or off. If autocomplete is on then the browser automatically complete the values based on values that the user has entered before. This attribute works with form and the fo...
Working with MathML in HTML5
MathMl is a easy way to insert math symbols, expressions and formulas into your web page. The supported browser can convert them to numeric values and symbols. To start writing the math code you have to use <math></math> tag for creat...
Difference among bind(), live(), delegate(), on() methods in jQuery
Hello,
Most of the time we have a bit of confusion between the jQuery .bind(), .live(), .delegate(), and .on() methods and when they should be used. Here I am sharing some information regarding this:
bind() Method:
Syntax: .bind( eventTyp...
HTML5 Canvas Game
Canvas can be used to draw graphs, shapes, images, and to make animations.
Here is the example below for making the game in canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
Circular graphs in SVG
Hello,
Here I am sharing some information related to circular graphs using Javascript.
JavaScript provides a library that generates circular graphs in SVG.
We need to include circles.js or circles.min.js file in the HTML file. It can be do...
HTML Event Attributes
Let us discuss some of the HTML Events Attributes:
1. oninput
2. onselect
3. onchange
4. onsubmit
5. onkeypress
6. onresize
Let us discuss it one by one
1. oninput - When an element get the user input, this attribute fires autom...
How to set half color on text ?
Hi all,
Below is an example how to make half color on text using css. In this example we are using custom-attribute.
If you are looking for custom-attribute, In one my previous blog I have explained about it click custom-attribute to know m...
Underline hover effect using CSS
Hi all,
In this, I am showing a simple hover underline effect using pseudo elements and just set transition at .3 second make width 100% on element hover.
See the below code with output -
CSS:
a, a:visited {
text-decoration: none;
...
Simple loader using pure CSS
Hi all,
Below is an example of pure css loader. Using css animate I just rotate the div and change the border radius. Check the code for details.
CSS :
div {
height: 20px;
width: 20px;
background-color: transpa...
Uses of CSS prefixes
Hello all,
Mainly prefixes are used for css3 properties which is experimental or non standard CSS properties, this tells to different browser
Mostly we avoid the prefix but sometimes if you are not using prefix, your css3 properties will no...
How to pass values from one div to another div in same page
Hello reader!
If you want to send the value from one div to another div in your same webpage, you can do this by help of JavaScript function.
Lets do this with example-
This is the div from which the value is taken
<div id='td1'>T...
HTML5 Datalist Element
Hi all,
Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.
Example :-
<label>Select your preferred code editor:&...
What is CSS attribute selectors ?
HI all,
CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.
Lets understand this with below example -
I have a s...
How to make custom attribute in Html5 ?
Hi all,
You can make your own custom attribute using data-. It allows possessive exchanged information between HTML and its DOM representation. It can work with javascript also, every browser will let you fetch and modify data- attributes usin...
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...
Difference between setTimeout(), setInterval() in Javascript
In Javascript we can execute some code at specific time intervals. These are called timing events.
There are two methods that are used:
1.setInterval()
2.setTimeout()
setInterval() Method : The setInterval() method executes the function ...
Standard directory structure for angular
The directory structure is also an important part for any framework and you can manage and maintain properly. May be it is possible you have searched tutorials and examples for Angular directory structure.
Directory structure always helps you ...
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...
Using $scope in Angular JS
$scope is an object instance of a controller. $scope object instance is created when the ng-controller directive is called.
The $scope object that is used by views is organized into a hierarchy. Firstly, there is a root scope, and then root sc...
How to make Geolocation Watch Position Distance Calculator between two city
In below example, I am calculating the distance between center of Mumbai City to Pune.
Using geolocation we get current location and monitor it using the watch position method. On this type we will be calculating the distance between starting p...
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...
How to change placeholder color ?
Hi all,
Many time we need to change the input placeholder color or style so here is an pseudo element ::placeholder which can helps you. placeholder defult color is gray with 0.6 opacity so if your input background color is dark in gary, you...
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...
CSS filters
Hi all,
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an expe...
CSS4 selectors
HI all,
As we all knows CSS33 describes the look and formatting of a document written in a markup language very well but now the time is coming for CSS4.
Because it is still in WORKING DRAFT in W3C so all selector is not compatible with all...
How to upload two separate files in php
Hi if you want to upload two separate files from one single form to be uploaded and with a for simplest code
Look at mine code.
The form will have two separate input files but you need to name them common, ex 'files[]' I'm using 'upload[]' in ...
Sticky positioning using pure css
Hi all,
Sticky is a new attribute of position property. It is work like relative but it does not effect to any other element or parent element. It decrease your script code you can say, It work like a magic :)
Below is some example which sh...
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()...
Ajax Upload Files With the HTML5 FormData
If you are making a Ajax request to submit a form that include files then HTML5 FormData is the solution for that. You can also used jQuery form for upload files using Ajax request.
First, we need to add jQuery code to submit function which is...
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...
Bootstrap versus Foundation
*{margin:0;padding: 0;}
.mdUP table{border-collapse: collapse;width: 100%;margin:10px 0;}
.mdUP table thead{background: #ccc;}
.mdUP table th, .mdUP table td{padding: 5px;text-align:center;border:1px solid #ccc;}
...
Guide to Flexbox
pre{padding:4px;margin:5px 0;border-radius:0;color:#fff;background:#333;border:none;}
Introduction :
The flexible box called as flexbox is an powerful idea to give the container ability to alter their items
You can adjust child eleme...
stylish check box using pure css
Hi all,
Below is an example of custom check box, using pure css here is no any script.
You can use this example many type, like to select some image or theme. I hope it will helps you somewhere.
HTML:-
<div class="wrap">
...
CSS3 Selectors
pre{padding:4px;border-radius:0px;}
Hi all,
Selector are the basic component in the CSS. Here's a definition of the selector from W3C documentation -
A Selector represents a structure. This structure can be used as a condition (e.g. in...
15 HTML5 tags you need to know about
<article>
An Independent piece of content of a document such as blog entry newspaper article etc are represented by article tag. In other words we can say that, this tag represent independent piece of
content of a document, such as a
...
Switch list/grid view using jQuery
Hi all,
Below is an example of switching between list and grid view using jQuery.
$( document ).ready(function() {
$('.show-list').click(function(){
$('.wrapper').addClass('list-mode');
});
$('.hide-list').c...
How nth-child Works ?
Hi folks,
The :nth-child(n) selector is a pseudo element. which show the position on there parents element.
You can use (even) and (odd) for all even or odd child element.
:nth-child(odd)
For example:-
tr:nth-child(2n+1)
Rep...
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...
Section and Article tags in HTML5
Article:
It represents a self-contained composition in a document, application, or site.
It could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.
An article el...
Flipping a div by css3
Hello Readers
Here is the example of
Flipping a div with css3 transitions and 3d transforms.
<div id="container">
<div id="card">
<div class="frontFace">
<h2>Hover Me to view effect</h2>...
What is HTML5shiv.js?
Hello all,
In this blog we will discuss about HTML5shiv.js, as all known html 5 in on demand.
But some new Semantic Elements which are not accepted by browser like Internet Explorer-9 there was little to no support for HTML5 elements and o...
CSS support guide
Hello all,
below is a list of
a complete CSS support for every mobile, web and desktop email.
*{margin:0;padding:0;}
.mybox table{font-size: 13px;font-family:'arial';border-collapse: collapse;}
tr.header{height:auto;}
...
How to make simple Overlay popup ?
Hello readers!
Here is Example of Overlay popup. It is very simple and responsive.
Hope it will helps you somewhere.
Html:-
<div class="container-popup"></div>
<div class="popup">
<span id="close">...
Form Validations in HTML5
Different type of validation for HTML5:
1. Required Attribute: It is used when the value before submission of a form in not filled.
It is sometimes known as Mandatory or Compulsory field.
Use of "required" attribute.
Example:
<f...
