Web programming tips and tricks : January 2014

Friday, January 31, 2014

Responsive Form using div and css

Following code very useful for Responsive Website.This code used div based form (Table less) . It is used only small css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Example For Responsive Form (div based code)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
    width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
    font-size: 90%;
}
fieldset {
    border: 0;
padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
    width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}

@media (max-width: 600px) {
form > div {
    margin: 0 0 15px 0;
}
form > div > label,
legend {
    width: 100%;
    float: none;
    margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
    width: 100%;
    float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
    width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label,
    legend {
    text-align: right;
}
}

</style>

</head>

<body bgcolor="#DBDBDB">

<form action="#">

<header>
    <h2>Example For Responsive Form</h2>

</header>

<div>
    <label class="desc" id="title1" for="Res1"> Name</label>
    <div>
      <input id="Res1" name="Res1" type="text" class="field text fn" value="" size="8" tabindex="1">
    </div>
</div>

<div>
    <label class="desc" id="title3" for="Res3">
      Email
    </label>
    <div>
      <input id="Res3" name="Res3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
   </div>
</div>

<div>
    <label class="desc" id="title4" for="Res4">
      Message
    </label>

    <div>
      <textarea id="Res4" name="Res4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
    </div>
</div>

<div>
    <fieldset>

      <legend id="title5" class="desc">
        Select a Gender
      </legend>

      <div>
          <input id="radioDefault_5" name="Res5" type="hidden" value="">
          <div>
              <input id="Res5_0" name="Res5" type="radio" value="Male" tabindex="5" checked="checked">
              <label class="choice" for="Res5_0">Male</label>
          </div>
        <div>
            <input id="Res5_1" name="Res5" type="radio" value="Female" tabindex="6">
            <label class="choice" for="Res5_1">Female</label>
        </div>
        <div>
            <input id="Res5_2" name="Res5" type="radio" value="Others(If not an Individual)" tabindex="7">
            <label class="choice" for="Res5_2">Others(If not an Individual)</label>
        </div>
      </div>
    </fieldset>
</div>

<div>
    <fieldset>
      <legend id="title6" class="desc">
        Select fruits
      </legend>
      <div>
      <div>
          <input id="Res6" name="Res6" type="checkbox" value="Apple" tabindex="8">
          <label class="choice" for="Res6">Apple</label>
      </div>
      <div>
          <input id="Res7" name="Res7" type="checkbox" value="Orange" tabindex="9">
          <label class="choice" for="Res7">Orange</label>
      </div>
      <div>
          <input id="Res8" name="Res8" type="checkbox" value="Banana" tabindex="10">
          <label class="choice" for="Res8">Banana</label>
      </span>
      </div>
    </fieldset>
</div>

<div>
    <label class="desc" id="title106" for="Res106">
        Select a Title
    </label>
    <div>
    <select id="Res106" name="Res106" class="field select medium" tabindex="11">
      <option value="Mr">Mr</option>
      <option value="Ms">Ms</option>
      <option value="Dr">Dr</option>
            <option value="Miss">Miss</option>
    </select>
    </div>
</div>

<div>
        <div>
        <input id="saveForm" name="saveForm" type="submit" value="Submit">
    </div>
    </div>

</form>
</body>
</html>

Wednesday, January 29, 2014

Convert number to words using php script

Following code easy to use "convert number to words" using php Programming.

<?php
// define function convert_number_to_words
function convert_number_to_words($number) {

$hyphen      = '-';
$conjunction = ' and ';
$separator   = ' ';
$negative    = 'negative ';
$decimal     = ' point ';
$dictionary = array(
0                   => 'zero',
1                   => 'one',
2                   => 'two',
3                   => 'three',
4                   => 'four',
5                   => 'five',
6                   => 'six',
7                   => 'seven',
8                   => 'eight',
9                   => 'nine',
10                  => 'ten',
11                  => 'eleven',
12                  => 'twelve',
13                  => 'thirteen',
14                  => 'fourteen',
15                  => 'fifteen',
16                  => 'sixteen',
17                  => 'seventeen',
18                  => 'eighteen',
19                  => 'nineteen',
20                  => 'twenty',
30                  => 'thirty',
40                  => 'fourty',
50                  => 'fifty',
60                  => 'sixty',
70                  => 'seventy',
80                  => 'eighty',
90                  => 'ninety',
100                 => 'hundred',
1000                => 'thousand',
1000000             => 'Lakh',
1000000000          => 'billion',
1000000000000       => 'trillion',
1000000000000000    => 'quadrillion',
1000000000000000000 => 'quintillion'
);

if (!is_numeric($number)) {
return false;
}

if (($number >= 0 && (int) $number < 0) || (int) $number < 0 - PHP_INT_MAX) {
// overflow
trigger_error(
    'convert_number_to_words only accepts numbers between -' . PHP_INT_MAX . ' and ' . PHP_INT_MAX,
    E_USER_WARNING
);
return false;
}

if ($number < 0) {
return $negative . convert_number_to_words(abs($number));
}

$string = $fraction = null;

if (strpos($number, '.') !== false) {
list($number, $fraction) = explode('.', $number);
}

switch (true) {
case $number < 21:
    $string = $dictionary[$number];
    break;
case $number < 100:
    $tens   = ((int) ($number / 10)) * 10;
    $units = $number % 10;
    $string = $dictionary[$tens];
    if ($units) {
        $string .= $hyphen . $dictionary[$units];
    }
    break;
case $number < 1000:
    $hundreds = $number / 100;
    $remainder = $number % 100;
    $string = $dictionary[$hundreds] . ' ' . $dictionary[100];
    if ($remainder) {
        $string .= $conjunction . convert_number_to_words($remainder);
    }
    break;
default:
    $baseUnit = pow(1000, floor(log($number, 1000)));
    $numBaseUnits = (int) ($number / $baseUnit);
    $remainder = $number % $baseUnit;
    $string = convert_number_to_words($numBaseUnits) . ' ' . $dictionary[$baseUnit];
    if ($remainder) {
        $string .= $remainder < 100 ? $conjunction : $separator;
        $string .= convert_number_to_words($remainder);
    }
    break;
}

if (null !== $fraction && is_numeric($fraction)) {
$string .= $decimal;
$words = array();
foreach (str_split((string) $fraction) as $number) {
    $words[] = $dictionary[$number];
}
$string .= implode(' ', $words);
}
return $string;
}

//call function convert_number_to_words

$amount=30256;
echo "<strong>Total Amount in Numbers: </strong>".$amount."<br>";
echo "<strong>Total Amount in Words:</strong> ".strtoupper(convert_number_to_words($amount)." only");
?>

Monday, January 20, 2014

Zoomin and Zoom out using JavaScript & HTML

Following simple code zoomin and zoom out (Image and content ) using JavaScript / HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Zoom In / Zoom Out </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
        function ZoomIn() {
            var ZoomInValue = parseInt(document.getElementById("divContent").style.zoom) + 10 + '%'
            document.getElementById("divContent").style.zoom = ZoomInValue;
            return false;
        }

        function ZoomOut() {
            var ZoomOutValue = parseInt(document.getElementById("divContent").style.zoom) - 10 + '%'
            document.getElementById("divContent").style.zoom = ZoomOutValue;
            return false;
        }
        function Zoomorg() {
            var ZoomOutValue = parseInt(100) + '%'
            document.getElementById("divContent").style.zoom = ZoomOutValue;
            return false;
        }

    </script>
</HEAD>

<BODY>
<div>
            <input type="button" value="Zoom In" OnClick="return ZoomIn();" />
            <input type="button" value="Zoom out" OnClick="return ZoomOut();" />
            <input type="button" value="Orignal Size" OnClick="return Zoomorg();" />    <br><br>
        </div>

    <div id="divContent" style="zoom: 100%">
Six month Professional Training in Web Desinging from Rajiv Nanda Design & Photography
     HTML, Dream weaver CS3(CSS, Div Tag, Table less
     Sites), Flash CS3 with Action script, Anfy Java ,
     Flax, Front Page, VCD Cutter, Jquery, javascript,
     Sound Forge, Xara 3D, Anim FX, Corel Draw,
     Photoshop, Illustrator)

</div>
</BODY>
</HTML>

Wednesday, January 1, 2014

Show output value in input box using javascript, html and php

Following below code output value input text box using ajx, php

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function get_id_val(val){
    var option = val.options[val.selectedIndex];
    var hr = new XMLHttpRequest();
    $.ajax({
        type: "GET",
        url: "sql.php",
        data: "value="+option.value,
        success: function(message){
        //    alert(message);
        //$("#result").html(message);
        //   $('#s_op_id').val(message.s_op_id);
        //$("#s_op_id").val(message.returnValue);
        // body:$('#s_op_id').val()
        // alert(data);
        //        $('#s_op_id').text(data);
        // $('#s_op_id').val(data);
        // document.form1.s_op_id.value = $('#s_op_id').val();

        // var return_data = message;
        // alert(return_data);
        //document.getElementById("s_op_id").innerHTML = message;
document.form1.s_op_id.value = message;

        },
            failure: function() {
                alert('fail');
            }

    });

}


</script>

<form name="form1" >
<select onchange="javascript:get_id_val(this)" id="variation_select_61_10" class="wpsc_select_variation">
    <option value="0" disabled="disabled">-- Please Select --</option>
    <option value="13">L</option>
    <option value="12">M</option>
    <option value="11">S</option>
</select>

<input type="text" name="s_op_id" id="s_op_id"/>

</form>

php code as file sql.php

<?php
echo $_REQUEST['value'];

?>