Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Moving image using iPhone Accelerometer..

    I've put together a couple of scripts, in order that I can make an image move left or right on the x-axis, depending on the LR (left/right) read-out from the accelerometer of an iPhone.
    However, it's not working at the moment, so could anyone possibly see what I've missed out - I've worked on it that long, that I think I'm missing something obvious!!
    THANKS!!
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>onlywebpro.com</title>
    </head>
    <body>
      <h2>Device Orientation with HTML5 | onlywebpro.com</h2>
    <img src="Car4.png" id="car" style="position:relative;top:200px;left:200px; "><br> 
     
    <script type="text/javascript">
    if (window.DeviceOrientationEvent) {
      console.log("DeviceOrientation is supported");
      window.addEventListener('deviceorientation', function(eventData) {
            var LR = eventData.gamma;
            deviceOrientationHandler(LR);
    		var userWidth = window.screen.width;
    function moveRight() {
    var pp = document.getElementById("car");
    var lft = parseInt(pp.style.left);
    var tim = setTimeout("moveRight()",50);  // 50 controls the speed
    lft = lft+LR;  // move by 50 pixels
    pp.style.left = lft+"px";
    if (lft > userWidth + 439) {  // left edge of image past the right edge of screen
    pp.style.left = -400;  // back to the left
    clearTimeout(tim);
    }
    }
        }, false);
    } else {
        alert("Not supported on your device or browser.  Sorry.");
    }
     
    var userWidth = window.screen.width;
    function moveRight() {
    var pp = document.getElementById("car");
    var lft = parseInt(pp.style.left);
    var tim = setTimeout("moveRight()",50);  // 50 controls the speed
    lft = lft+LR;  // move by 50 pixels
    pp.style.left = lft+"px";
    if (lft > userWidth + 439) {  // left edge of image past the right edge of screen
    pp.style.left = -878;  // back to the left
    clearTimeout(tim);
    }
    }
    </script>
     
    </body>
    </html>
    Last edited by dave204; 03-05-2012 at 01:52 AM. Reason: Altered code..


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •