Home » Archive

Articles in the Javascript Category

CSS, CSS3, Design, HTML5, Javascript »

[24 Feb 2013 | No Comment | ]

Simple javascript and html coded calculator does simple operations like Addition, Subtraction, division and multiplication.
The code is free to use or modify.
I am distributing to code to be useful for beginners.

Simple Calculator (html, css, javascript)
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<style>
#wrapper
{
width:250px;
height:330px;
background:#333;
position:absolute;
}
#container{
width:95%;
height:95%;
position:relative;
left:5px;
top:7px;
border:1px solid #666;
background:#666;
}
.inputClass
{
padding:10px 0px;
margin:4px 0px 0px 4px;
text-align:right;
font-size:14px;
font-weight:600;
}
.numericBTN{
width:52px;
height:30px;
margin:20px 0px 0px 4px;
}

.controlBTN
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000;
background: -moz-linear-gradient(
top,
#f5c7d7 0%,
#ff5c5c);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f5c7d7),
to(#ff5c5c));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ff5c5c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px …

HTML5, Javascript »

[5 Nov 2012 | No Comment | ]

When building game for IOS device using HTML5 we may need to detect the IOS device tilt direction to move the Car, Space ship or any Object in same direction. There are lots and lots of user interactive games or apps can be done with this. In this article we have shared the code which makes it possible to tilt programming objects to react with user action of tilting the IOS device.
Note: Please note that the code works only in IOS browser. 
Will not work on the HTML5 enabled browser …

CSS3, Design, HTML5, Javascript »

[18 Oct 2012 | No Comment | ]

We have seen image crop tool using server side script, below is HTML5 image crop tool to edit image on browser using HTML5 Canvas. So highlight of this script is, it just uses only HTML5 and js to crop and display the cropped image on Canvas.
No upload script is need to edit the original file, so no server overload.This cropping tool using HTML5 does not require any server-side script to crop. Just click and drag over the image to make selection and then press “crop Image” button to replicate crop on …

CSS3, Design, HTML5, Javascript »

[15 Oct 2012 | No Comment | ]

We have seen marching ants in most of the designing tools, like marquee tool or using any selection tools. we can see dotted lines on click and dragging our the canvas. Same marquee or marching ant effect we have recreated here using HTML5 and javascript.

 
HTML5 Canvas Mouse Events using javascript:
Before viewing the entire code for marching ants or marquee tool in HTML5. View this tutorial on how to use or interact with mouse events on html5 canvas element.
Entire Code for html5 Marching ants:
Image used for ant:      
Note: Right+click …

Design, HTML5, Javascript »

[3 Oct 2012 | No Comment | ]

HTML5 canvas element can be interacted with mouse to get input from user in game or web application. This simple article explains how to add mouse interaction events in HTML5 Canvas element. Since canvas element responds to javascript, we are going to use javascript to add mouse events. Tutorial Difficulty:

Basic users

Lets us see how to add the following mouse events in html5 canvas

onmousedown
onmouseup
onmousemove

HTML5 Canvas Mouse Events using javascript
Some of the mouse events in HTML5

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
onmousemove

onmousedown event in HTML5 Canvas:
onmousedown event fires when the user press the mouse button. This …