jQuery payment credit/debit card number striping

     

Editable div Or Div as input box

 I have come across all  the hurdle to figure out the way of  doing the div  as  input  box. I finally  got the  solution to make  div as  editable. I have  used jQuery  to  tackle  editable div's acts as  input box.

The steps follow is:


  1. download the query  plugin from http://jquery.com
  2. Include it in your  html  page head  tag
           <script type="text/javascript" src="jquery.js"></script>  3. then add the  css
   
     .editableInputbox {
         -moz-appearance: textfield;
         -webkit-appearance: textfield;
         background-color: white;
         background-color: -moz-field;
         font: -moz-field;
         font: -webkit-small-control;
         margin-top: 5px;
         padding: 2px 3px;
         width: 300px;
     }
 4.write the div  tag button to  modify and put  in the inside the body  tag of your  html  document.

       <span class="editableInputbox" id="user_name" contenteditable="false">i have card</span>
       <div onclick="modifyContactAddress();">Modify</div>

5. write javascript  function to  make div as  editable text box.

  function modifyContactAddress()
 {
   document.getElementById('user_name').contentEditable = 'true';
   $('.editableInputbox').css({
       'border':'1px solid darkgray',
       'box-shadow':'1px 1px 1px 0 lightgray inset'
   });
}
i have  attached the  screenshot  of the editable div.

1. 
   

Array to Json in javascript

           In the web developement ,Array to  Json conversion and viceversa are frequently  used.  here  im explaining how to  convert  the date of array  into  json formate.
 
Eg:

   Array name  arr, calling the  arra2json function  by passing the  arr as  parameter.

    var arr = new Array();
     arr['name'] = 'a1';
     arr['address'] = 'a2',
     arr['city'] = 'a3',
     arr['state'] = 'a4'

     array2json(arr);

    /*
    *Function to convert  to  array  to  json  formate
    */
    function array2json(arr) {
        var parts = [];
        var is_list = (Object.prototype.toString.apply(arr) === '[object Array]');

        for(var key in arr) {
            var value = arr[key];
            if(typeof value == "object") { //Custom handling for arrays
                if(is_list) parts.push(array2json(value)); /* :RECURSION: */
                else parts[key] = array2json(value); /* :RECURSION: */
            } else {
                var str = "";
                if(!is_list) str = '"' + key + '":';

                //Custom handling for multiple data types
                if(typeof value == "number") str += value; //Numbers
                else if(value === false) str += 'false'; //The booleans
                else if(value === true) str += 'true';
                else str += '"' + value + '"'; //All other things
                // :TODO: Is there any more datatype we should be in the lookout for? (Functions?)
                parts.push(str);
            }
        }
        var json = parts.join(",");

        if(is_list) return '[' + json + ']';//Return numerical JSON
        return '{' + json + '}';//Return associative JSON
    }

Above function array2json returns the output of the  bellow json formate.

output ->  {"name":"a1","address":"a2","city":"a3","state":"a4"}

jQuery context menu

A context menu  is amenu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. 

Features

1.trigger contextMenu with right-click, left-click, hover or own custom trigger events

2..delegated event handling removing the need for re-initialization when trigger objects are added / removed

3.dynamic on-demand menu creation

4.optional icons for commands

5.input elements (text, textarea, checkbox, radio, select) within the menu

6.custom html elements (command free)

7.show/hide callbacks to update the state of commands

8.small memory footprint even with hundreds of trigger objects

9.adjust position of menu to fit in viewport

10.enable / disable commands

11.nested sub-menus

12.full keyboard interaction

13.HTML5 <menu> support

Google geochart

                   Google geochart  is the javascript/jquery  feature  by google, by geochart  we can  show that  whereever  the  users  used the  website page kind of of  a thing.  


<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['India', 600],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

    

hide image path in a PHP

 

            Image protecting in a web site is the major security issue. But we cannot  make it 100% secure, atleast we can make it difficult. In PHP  we can make  the image  path  hidden, customer/web user cannot access the image folder or  image path.

    Here are the steps to hide the direct URL/real path  of the image.

Copy the bellow code and put it in  the  new php file  image.php.

image.php

<?php

$id = $_GET['id'];

$map1 = {
1=>'c:/picture/jellyfish.jpg',
2=>'c:/picture/cfish.jpg',
3=>'c:/picture/dfish.jpg'
        }

$path = $map1[$id];
$str = file_get_contents($path);
echo $str; 

?>

and  in the html  page(suppose test.html), use  the code  like this bellow

<img src='image.php?id=3'>

-------------------------------------------------------------------------------------------------------------------------------------------------
if you are using database,  get  the  path of the  image from database  and put it in the array.

<?php 

$root = $_SERVER['DOCUMENT_ROOT'];
$db = new db_mysql();
$id = $_GET['id'];
$sql = "SELECT id, org_id, div_id, file_name FROM photos WHERE id='".$id."'";
$map1 = Array();
$db->query($sql);
while ($db->next_record())
{
    $id = $db->f('id');
    $map1[$id]['name'] = $root."/photos/".$db->f('org_id')."/".$db->f('div_id')."/".$db->f('div_id')."_".$db->f('file_name');
} 

$path = $map1[$id]['name'];
$str = file_get_contents($path);
echo $str;  

?>

if you have any query, please  feel  free to comment.