Search Topic Here

Monday, 30 June 2014

Form validation with CSS3


It is very easy to validate form by using CSS3 the below source code gives a  great validation


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Form validation </TITLE>
   <style>
  body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* required to properly style form
   elements on WebKit based browsers */
  -webkit-appearance: none;

  width : 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

  </style>
 </HEAD>

 <BODY>
  <form>
  <p>
    <fieldset>
      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
      <input type="radio" required name="title" id="r1" value="Mr" ><label for="r1">Mr. </label>
      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">How old are you?</label>
    <!-- The pattern attribute is not required on number field but
         it can act as a fallback for browsers which don't implement
         the number field but support the pattern attribute such as Firefox -->
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  </p>
  <p>
    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Apple</option>
        <option>Strawberry</option>
        <option>Lemon</option>
        <option>Orange</option>
    </datalist>
  </p>
  <p>
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
  <p>
    <label for="t3">Leave a short message</label>
    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>
 </BODY>
</HTML>

OUTPUT:

Form validation

Title*



Posted by at No comments:

Sunday, 29 June 2014

Html Dom



Every one confusing regarding HTML DOM(Document object Model).There no confusion HTML DOM meansimagining html document with  a  tree Structure with Parent and Child relationship.every one  knows that html is tag based and it  allows tags inside tags .

Ex:

<p>
    <b> Hello</b>
</p>

Here the bold tag <b> is inside para tag<p>
Now coming to the topic HTML DOM is introduced to change the properties of all the HTML elements dynamically by using java script.

The following Structue shows  basic HTML DOM:





Example Structure with table tag






here i will give a basic example for  changing visibility and hidden properties dynamically.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<script>
function hidevisible(x)
{
if(x==1)
{
document.getElementById('text').style.visibility="hidden";
}

if(x==2)
{
document.getElementById('text').style.visibility="visible";
}
}

</script>
 </HEAD>

 <BODY>
 <p id="text">Hello How are u </p>
 <button onclick="hidevisible('1')">HIDE</button> <button onclick="hidevisible('2')" >visible</button>


 </BODY>
</HTML>

OUTPUT:
New Document
Hello How are u



Posted by at No comments:

Thursday, 26 June 2014

Design snake game with javascript

Code for snake game with  javascript:
<!doctype html>
<html>
<head>
<meta charset=UTF-8">
<meta name="description" content="Snake Game using HTML5 Canvas">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>Snake Game</title>
<style>
</style>
<script>

 $(document).ready(function(){
var canvas = $("#canvas")[0];
var Context = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var GameOver = $("audio#GameOver").get(0);
var GamePlay = $("audio#GamePlay").get(0);
var SnakeEating = $("audio#SnakeFood").get(0);
var cw = 10;
var direction;
var food;
var score;
var SnakeArray; 
$("button#play").hide();
$("button#Soundoff").hide();
function init()
{
if (GamePlay.paused)
         GamePlay.play();
direction = "right";
create_snake();
create_food();
score = 0;
Speed =100;
play();
}
function play()
{
   if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, Speed);
allowPressKeys = true;
$("button#Soundoff").removeAttr('disabled');
$("button#SoundOn").removeAttr('disabled');

 }
function pause()
{
clearInterval(game_loop);
allowPressKeys = false;
$("button#Soundoff").attr('disabled','disabled');
$("button#SoundOn").attr('disabled','disabled');
}
init();
function create_snake()
{
var length = 3; 
SnakeArray = [];
for(var i = length-1; i>=0; i--)
{
SnakeArray.push({x: i, y:0});
}
}

function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw), 
y: Math.round(Math.random()*(h-cw)/cw), 
};
}

function paint()
{
YourScore="Your Score is: "+score;
   $("p#Score").html(YourScore);
Context.fillStyle = "blue";
Context.fillRect(0, 0, w, h);
Context.strokeStyle = "red";
Context.strokeRect(0, 0, w, h);
  var nx = SnakeArray[0].x;
var ny = SnakeArray[0].y;
if(direction == "right") nx++;
else if(direction == "left") nx--;
else if(direction == "up") ny--;
else if(direction == "down") ny++;
if(nx == -1 )
{
nx=w/cw-1;
}else if (nx==w/cw)
{
nx=0;
}
if(ny == -1)
{
ny=h/cw-1;
}
else if (ny == h/cw)
{
ny=0;
}

if(Ouroboros_Check(nx, ny, SnakeArray))
{
pause();
GamePlay.pause();
if(GameOver.paused)
 GameOver.play();
 alert("Game Over- Your Score : "+score);
 init();
 return;
}
if(nx == food.x && ny == food.y)
{
SnakeEating.play();
var tail = {x: nx, y: ny};
score++;
create_food();

}
else
{
var tail = SnakeArray.pop();
tail.x = nx; tail.y = ny;
}
SnakeArray.unshift(tail); 
for(var i = 0; i < SnakeArray.length; i++)
{
var c = SnakeArray[i];
paint_cell(c.x, c.y);
}
paint_cell(food.x, food.y);
}

function paint_cell(x, y)
{
Context.fillStyle = "white";
Context.fillRect(x*cw, y*cw, cw, cw);
Context.strokeStyle = "white";
Context.strokeRect(x*cw, y*cw, cw, cw);
}

function Ouroboros_Check(x, y, array)
{
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}

$("button#pause").click(function(){
$("button#pause").hide();
GamePlay.pause();
pause();
$("button#play").show();
});

$("button#Soundoff").click(function(){
$("button#Soundoff").hide();
GamePlay.play();
$("button#SoundOn").show();
});

$("button#SoundOn").click(function(){
$("button#SoundOn").hide();
GamePlay.pause();
$("button#Soundoff").show();
});

$("button#play").click(function(){
$("button#play").hide();
play();
GamePlay.play();
$("button#pause").show();
});

//Lets add the keyboard controls now
$(document).keydown(function(e){
if (!allowPressKeys){
    return null;
  }
var key = e.which;
switch(key)
{
case 37:
if(direction!="right") direction="left";
break;
case 38:
if(direction!="down") direction="up";
break;
case 39:
if(direction!="left") direction="right";
break;
case 40:
if(direction!="up") direction="down";
break;
default: 
         break;
}
})







})
</script>
</head>
<body align="center">
<h1>Snake Game</h1>
<canvas id="canvas" width="500" height="300">OOPS.. Upgrade your Browser</canvas>
<audio id="GamePlay" loop="loop" autoplay="autoplay">       
            <source src="GameGng.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<audio id="GameOver">       
            <source src="GameOver.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<audio id="SnakeFood">       
            <source src="SnakeEating.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<br/>
<strong><p id="Score"></p></strong>
<button id="pause"><img src="pause.jpg" alt="Pause"/></button>
<button id="play"><img src="Play.jpg" alt="Play"/></button>
<button id="Soundoff"><img src="SoundsOff.jpg" alt="SoundOFF"/></button>
<button id="SoundOn"><img src="SoundsOn.jpg" alt="SoundON"/></button>
</body>

OUTPUT: Snake Game

Snake Game

OOPS.. Upgrade your Browser


Posted by at No comments:
Subscribe to: Comments (Atom)