PHP Cluster: HTML

Showing posts with label HTML. Show all posts

Sunday, 14 July 2019

Create HTML Form with JavaScript

This tutorial is all about creating form using JavaScript. In this tutorial, we are going to see how to create simple html form using JavaScript step by step. ..............

Read more

Wednesday, 2 March 2016

Send form data in hidden on anchor click Using JavaScript

<form action ="actionpagename.php" id="testform" method="post">
<input type="hidden" name="name" value="dgegg" />
<input type="hidden" name="id" value="adfdsafe" />
</form>

<a class="your class" onclick="test()">Your Links</a>

<script type="text/javascript">
function test()
{
document.forms.testform.submit();
}
</script>

Friday, 5 February 2016

No border on HTML table when printing solution

Put style code within Printable Div

<script>
function printDiv(divid) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
}
</script>
<input type="button" class="btn btn-primary pull-right" onclick="printDiv('printableArea')" value="Print Invoice" />

<div id="printableArea">
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>

content to print

<div>

Sunday, 1 November 2015

how to calculate value of two textfield and display its sum in third textfield autmotatically

function sum() {

var txtFirstNumberValue = document.getElementById('txt1').value;

var txtSecondNumberValue = document.getElementById('txt2').value;

var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);

if (!isNaN(result)) {

document.getElementById('txt3').value = result;

}

</script>

Friday, 26 December 2014

breadcrumbs in html using JavaScript and css

JavaScript

<script type="text/javascript">
function breadcrumbs() {

sURL = new String;
bits = new Object;
var x = 0;
var stop = 0;
var output = "<div class=topnav><a href=/>Home</a> » ";

sURL = location.href;
sURL = sURL.slice(8,sURL.length);
chunkStart = sURL.indexOf("/");
sURL = sURL.slice(chunkStart+1,sURL.length)

while(!stop){
chunkStart = sURL.indexOf("/");
if (chunkStart != -1){
bits[x] = sURL.slice(0,chunkStart)
sURL = sURL.slice(chunkStart+1,sURL.length);
} else {
stop = 1;
}
x++;
}

for(var i in bits){
output += "<a href=\"";
for(y=1;y<x-i;y++){
output += "../";
}
output += bits[i] + "/\">" + bits[i] + "</a> » ";
}
//document.write(output + document.title);
document.write(output+ "text1" +" "+"»"+" "+ "text2");
document.write("</div>");
}
</script>

CSS

<style>
.topnav {
font-size: 0.8em;
color: #000;
background-color: #FFCF29;
border: 1px #00009C solid;
padding: 0.5em;
}

</style>

JS to call a function to appear breadcumbs where you need.

<script type="text/javascript">

breadcrumbs();

</script>

Thursday, 9 October 2014

snake game using html5

<!documentTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play Snake Game</title>
<style type="text/css">
body {text-align:center;}
canvas { border:5px dotted #ccc; }
h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;}
</style>
<script type="text/javascript">
function play_game()
{
var level = 160; // Game level, by decreasing will speed up
var rect_w = 45; // Width
var rect_h = 30; // Height
var inc_score = 50; // Score
var snake_color = "#006699"; // Snake Color
var ctx; // Canvas attributes
var tn = []; // temp directions storage
var x_dir = [-1, 0, 1, 0]; // position adjusments
var y_dir = [0, -1, 0, 1]; // position adjusments
var queue = [];
var frog = 1; // defalut food
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions
var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var sum = 0, easy = 0;
var i, dir;
// getting play area
var c = document.getElementById('playArea');
ctx = c.getContext('2d');
// Map positions
for (i = 0; i < rect_w; i++)
{
map[i] = [];
}
// random placement of snake food
function rand_frog()
{
var x, y;
do
{
x = MR() * rect_w|0;
y = MR() * rect_h|0;
}
while (map[x][y]);
map[x][y] = 1;
ctx.fillStyle = snake_color;
ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);
}
// Default somewhere placement
rand_frog();
function set_game_speed()
{
if (easy)
{
X = (X+rect_w)%rect_w;
Y = (Y+rect_h)%rect_h;
}
--inc_score;
if (tn.length)
{
dir = tn.pop();
if ((dir % 2) !== (direction % 2))
{
direction = dir;
}
}
if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])
{
if (1 === map[X][Y])
{
score+= Math.max(5, inc_score);
inc_score = 50;
rand_frog();
frog++;
}
//ctx.fillStyle("#ffffff");
ctx.fillRect(X * 10, Y * 10, 9, 9);
map[X][Y] = 2;
queue.unshift([X, Y]);
X+= x_dir[direction];
Y+= y_dir[direction];
if (frog < queue.length)
{
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
}
else if (!tn.length)
{
var msg_score = document.getElementById("msg");
msg_score.innerHTML = "Thank you for playing game.<br /> Your Score : <b>"+score+"</b><br /><br /><input type='button' value='Play Again' onclick='window.location.reload();' />";
document.getElementById("playArea").style.display = 'none';
window.clearInterval(interval);
}
}
interval = window.setInterval(set_game_speed, level);
document.onkeydown = function(e) {
var code = e.keyCode - 37;
if (0 <= code && code < 4 && code !== tn[0])
{
tn.unshift(code);
}
else if (-5 == code)
{
if (interval)
{
window.clearInterval(interval);
interval = 0;
}
else
{
interval = window.setInterval(set_game_speed, 60);
}
}
else
{
dir = sum + code;
if (dir == 44||dir==94||dir==126||dir==171) {
sum+= code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</head>
<body onload="play_game()">
<h1>Play Snake Game</h1>
<div id="msg"></div>
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas>
</body>
</html>

Tuesday, 16 September 2014

PHP HTML Form radio button

<?php

   if(isset($_POST['BtnSubmit']))
   {
      echo "<h3>Your form data as bellow</h3>";
      echo "</br>Your Name :{$_POST['FullName']}";
      echo "</br>Your are :{$_POST['YourGender']}";
      echo "<hr>";
   }

?>

<h3>PHP HTML Form radio button Example</h3>

<form name="UserInformationForm" method="POST" action="#">
      Enter Your Full Name :
      <input name="FullName" type="text" value="<?php echo $_POST['FullName']; ?>"><br/><br/>
      You are :
      <input name="YourGender" type="radio" value="male" <?php if($_POST['YourGender']=="male") echo "checked=checked"; ?> > Male
      <input name="YourGender" type="radio" value="female" <?php if($_POST['YourGender']=="female") echo "checked=checked"; ?>> Female
      <br/><br/>
      <input name="BtnSubmit" type="submit" value="Submit">
</form>