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.

Finding geo location of the ip address in PHP

      If you are using  google map  in your  application and  wanted to  show the user location google map in your application.  then we  the find the  ip  address  and  get the  geo location of the  ip  address. Bellow  is the  method   to  find the  city  by  passing  the  ip  address Using  PHP.


/**
 * Funtion  to  find the  city by passing the  IP Address.
 */
function geoCheckIP($ip)
{

//check, if the provided ip is valid

    if (!filter_var($ip, FILTER_VALIDATE_IP))
    {

        throw new InvalidArgumentException("IP is not valid");
    }

//contact ip-server

    $response = @file_get_contents('http://www.netip.de/search?query=' . $ip);

    if (empty($response))
    {

        throw new InvalidArgumentException("Error contacting Geo-IP-Server");
    }

//Array containing all regex-patterns necessary to extract ip-geoinfo from page

    $patterns = array();

    $patterns["town"] = '#City: (.*?)<br#i';

//Array where results will be stored

    $ipInfo = array();



//check response from ipserver for above patterns

    foreach ($patterns as $key => $pattern)
    {

//store the result in array

        $ipInfo[$key] = preg_match($pattern, $response, $value) && !empty($value[1]) ? $value[1] : 'not found';
    }
    /* I've included the substr function for Country to exclude the abbreviation (UK, US, etc..)
      To use the country abbreviation, simply modify the substr statement to:
      substr($ipInfo["country"], 0, 3)
     */
    $ipdata = $ipInfo["town"];

    return $ipdata;
}

geoCheckIP('50.56.112.226');


For  more  dinformation and send  me comments.

Getting Client IP using PHP

          To  track the client  location we  need the ip  address of the  user machine/ mobile  device. As PHP is a  Server  side  script we  can  easilly  track the user/client ip  address using the bellow  php function.  



function getRealIpAddr()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP']))
    //check ip from share internet
    {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    }
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
    //to check ip is pass from proxy
    {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    else
    {
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

$ip = getRealIpAddr();

For  feedback ,  leave  me comments.

Fetching the images based on screen resolution

      One  of the  main  issues in the  mobile web  application  is to  fetch  the  images  based on the  mobile  screen  resolution .  There  are  different  method to fetch  the  images  but  im here explain,   fetching the  image  based on the  screen  resolution.   Normally in the android  mobile  we  will  calculate the DPI(density per  inches) and  in the  iphone PPI(pixel per inches) . Here  im  taking the  screen  resolution.


    function getResolution()
    {
        window.imagePath ='';
        //get screen resolution of customer
        var custHeight = screen.height;
        var custWidth = screen.width;
        //if the  screed width  less  then  screen  height
        if( custWidth < custHeight)
        {    
            if (custWidth <=  320)
            {
                window.imagePath = 'drawable-mdpi';
            }
            else if (custWidth <= 480)
            {
                window.imagePath = 'drawable-hdpi';
            }
            else
            {
                window.imagePath = 'drawable-xhdpi';
            }
        }
        else
        {
            //else if the  screed width  greater  then  screen  height 
            if (custWidth <=  480)
            {
                window.imagePath = 'drawable-mdpi';
            }
            else if (custWidth <= 600)
            {
                window.imagePath = 'drawable-hdpi';
            }
            else
            {
                window.imagePath = 'drawable-xhdpi';
            }
        }    
    } 

Just  call  the getResolution() method  when  the  page  first  loads.  then use  the  window.imagePath anywhere in your  application. window.imagePath is the  global  varible  here.

This post  will really  help  you.  For  feed  back  leave  me comments.