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

Displaying Map using HTML5

Html5 provides geolocation API by using which we can display the results in a Map. Following example shows how we can show the Map in html5. To display the result in a map, you need access to a map service, like Google Maps. <!DOCTYPE html&...

Geolocation API in HTML5

HTML5 Provides new feature of geolocation API which can help user to find his current location and share the location to the web site. It works with the javascript which capture the latitude and longitude of the user. It works with the global ...

How CSS triangles work?

Hello folks, How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element. The angle intersects at (45) so the intersection edge is used by border here and we can also skew a...

HTML5 Web Worker

A web worker is basically a javascript code that runs in the background. It does not effect the performance of the Page. Usually When we run some script in our html page the page do not response until the script finishes. By using Web Workers ...

Custom select box

Hello Friends, If you are looking to create a custom select box, you can use below HTML and CSS code I have provided. Below an example of custom select box. HTML - <div class="wrapper"> <input id="textfield" type="te...

How to Make SlideShow in HTML5

In the past year, We were using Javascript and jQuery for image slideshow(image Slider), But nowadays we can make slideshow easily with the help of HTML5. In this blog I am going to discuss about how to make slideshow in HTML5 with complete exp...

How to upload image using simle Jquery and HTML5

Hello Reader's! If you are developing the html5 based ajax image uploader then you can look this jquery as the best and easy to use. Lets see how to upload images 1) include two JS file <script src="jslibs/jquery.js" type="text/javascri...

SVG Matrix transformation

The SVG stands for "scalable vector Graphic" and below are the example for SVG matrix. The matrix looks like this: a c e b d f 0 0 1 There is only first 6 values can be specified, you only provide 6 values to the matrix transfo...

Draggable and resizable a block using HTML5 and Javascript

If you want your block draggable and resizable, the following code will help you for the same: HTML: <section class="map"> <div class="container-fluid"> <div class="this-week panel-group dayListing" id="ac...

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...

Quick definition question.

Hi, I am having trouble finding the technical term for this (see attachment), i have no idea what it called in english, it is basically a type of browser that popup on directly on the page, so when i click on an ad, instead of it opening new t...

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...

Avoid Discrete Polygon Colliders in Spritesheet Animations

Scenario :- I am using a spritesheet with a few frames to run my animations in ImpactJS. As using large number of frames can increase my sheet size. Basically it is a shot playing animation in which I have applied Polygon collider to the bat wit...

How to set high velocity in Box2D

I want to throw an object in Box2d by applying a force vector, But it is limited to a certain velocity even if I Apply Force by a very high value? How can I achieve this ? For Ex:- I have to fire a bullet at a very high speed. var force = new ...

How to access frame numbers in Spine Animations

When using Spine (http://esotericsoftware.com/) JavaScript version. How can I access the frame numbers while the animation is playing as I have to perform some tasks based on them ?

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...

PHP TEAMLEADER FR EINES DER SPANNENDSTEN UNTERNEHMEN BERLINS GESUCHT !!!

Fr den Standort Berlin suchen wir zum nchstmglichen Termin eine/n PHP Leadentwickler/Teamleiter (m/w) Deine Aufgaben Aufbau eines eigenen Entwickler-Teams mit dem Ziel fachliche und eventuell disziplinarische Fhrung eines bis zu 5 kpfig...

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...
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: