Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
HTML5

Featured

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...
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: