Detect Shake in Phone using Jquery
Wall Script
Follow Me:
Monday, December 29, 2014

Detect Shake in Phone using Jquery

In this post I want to explain you how to implement phone shake detection using jquery. Using this I had implemented an interesting concept that shake the mobile device and get the product discount. Very easy to use add this to your e-commerce project, sure this user experience feature will attract the people for more sales. Please try these live demos with your mobile device, this works with mobile web browser device accelerometer.

Detect Shake in Phone using Jquery


Download Script     Live Demo 1     Live Demo 2

Note: Try this demo with mobile device.



Products Table
Product table contains all the product details.
CREATE TABLE `products` (
`product_id` int AUTO_INCREMENT,
`product_name` varchar(150),
`product_img` text,
`price` float,
`discount` int,
PRIMARY KEY (`product_id`)
);

JavaScript
Contains JavaScript code, $.shake function detects phone shake and it callback phoneShake().
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ios-shake.js"></script>
<script type="text/javascript" src="js/jquery.ui.shake.js"></script>
<script type="text/javascript">
$(document).ready(function() {

setInterval(function()
{
$('#shake').shake();
}, 3000);

function phoneShake()
{
var productID=$(".product_id").attr('id');
var url='ajax_discount.php';
var data='product_id='+productID;

$.ajax({
type:"POST",
url:url,
data:data,
dataType:"json",
success:function(data)
{
$('#shake').hide();
$('#result').html(data);
}
});
}

$.shake({
callback: function()
{
phoneShake();
}
});
});
</script>

PHP Code
Contains PHP code,  getting product details from products table.
<?php
require 'db.php';
$product_id='1';
$sql = "SELECT product_name,product_img,price FROM products WHERE product_id=:product_id";

try {
$db = getDB();
$stmt = $db->prepare($sql);
$stmt->bindParam("product_id", $product_id);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;

foreach($products  as $row)
{
$product_name=$row->product_name;
$product_img=$row->product_img;
$price=$row->price;
}
}
catch(PDOException $e)
{
echo 'Connection Error';
}
?>

HTML Code
Set the viewport meta tag for mobile view.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
//JavaScript
</head>
<body>
<div id="<?php echo $product_id;?>" class="product_id">
<img src="<?php echo $product_img;?>" /> 
</div>
<div id="shake">Just shake your phone</div>
<div id="result"><?php echo $price;?></div>
</body>
<html>

ajax_discount.php
This will display product discount.
<?php
require 'db.php';
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST")
{
$product_id=$_POST['product_id'];
$sql = "SELECT discount,price FROM products WHERE product_id=:product_id";

try {
$db = getDB();
$stmt = $db->prepare($sql);
$stmt->bindParam("product_id", $product_id);
$stmt->execute();
$discount = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;
echo '{"product_discount": ' . json_encode($discount) . '}';
}
catch(PDOException $e)
{
echo 'Connection Error';
}
}
?>

db.php
You have to modify database configuration details, before trying this enable php_pdo extension in php.ini file.
<?php
function getDB() {
$dbhost="localhost";
$dbuser="username";
$dbpass="password";
$dbname="database";
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


22 comments:

  1. its really cool thumbs Up from mirchu.net Team :)

    ReplyDelete
  2. i check on my Samsung note 2. its work great. i will be use with something interesting :)

    ReplyDelete
  3. Funny idea, to change shirt colour with a shake! Nice marketing tip!

    ReplyDelete
  4. This is Cool idea. It,s amazing. I will try it for myself.

    ReplyDelete
  5. Is it able to load image using ajax on mobile ?

    ReplyDelete
  6. Awesome works on nexus 5

    ReplyDelete
  7. loved the concept of shaking phone to get discount. Myntra/Flipkart should make use of this concept.

    ReplyDelete
  8. Amazing, Thats very good coding.

    ReplyDelete
  9. But whether it can be used for all mobile devices

    ReplyDelete
  10. Very funny
    I am using nokia Lumia and only the text shakes. No vibration of my phone

    ReplyDelete
  11. Ended up to your site ,was looking for the same to implement in my new app .

    ReplyDelete
  12. Thanks for the script , it is awesome and works perfectly for me.But can someone help me out with the picture changing script(the one in the images.html).I want the code to get url's of the images of products from my database rather than I manually providing it.It will be of great help,Thanks.

    ReplyDelete
  13. Such a perfectly made script, i need it for a long time. hank you srinivas.

    ReplyDelete
  14. loved the concept of shaking phone to get discount. Myntra/Flipkart should make use of this concept.

    ReplyDelete

Make in India