|
JavaScript - 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>
Similar TutorialsHello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx Hi there folks. I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen. I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those. The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further! Any help is greatly appreciated. Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : Hello, I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable. Code: <center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
<script language="JavaScript">
var Image = document.getElementById("Ball");
var Position = 100;
function moveDown()
{
Image.style.top = Position + 20
}
</script>
Thanks, Celia Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
My code is: Code: <html>
<head>
<script type='text/javascript'>
winx=220
winy=176
self.resizeTo(winx,winy);
</script>
<img id="default"
style="z-index: 0;left: 0; position: absolute; top: 0px"
height=32 width=32 align=baseline border=0 hspace=0 src='save.gif'></p>
<script type="text/javascript">
document.getElementById("default".style.top = '0px';
document.getElementById("default".style.left = '0px';
</script>
The image shows up, but it doesn't move. I can't seem to find out what I'm doing wrong. Edit: Finally spotted it, I was missing a ")" ._. hi all, I want to be able to move an image from a left or right when tilting my ipad. when tilted the the right the image moves to the right according to the angel tilted and do the same to the other direction. the image is doubled (or more) the size of the stage (1024x768). I can't use Flash for obvious reasons so looking at other options. thanks Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you Hello all! I am fairly experienced in HTML but javascript I am useless with. My website can be found here; http://mgwalker.site90.com/index.html If you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen. In Chrome it is centered in the div, as it should be... Please help I have no idea why this would happen! Code: function move_user_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageUser').offsetTop;
x = x + step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageUser').offsetTop;
x = x - step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageUser').offsetLeft;
y = y - step;
document.getElementById('imageUser').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageUser').offsetLeft;
y = y + step;
document.getElementById('imageUser').style.left = y + "px";
break;
}
}
function move_report_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageReport').offsetTop;
x = x + step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageReport').offsetTop;
x = x - step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageReport').offsetLeft;
y = y - step;
document.getElementById('imageReport').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageReport').offsetLeft;
y = y + step;
document.getElementById('imageReport').style.left = y + "px";
break;
}
}
Code: <div id ="display" style="width:640px; height:480px; overflow:hidden;">
<div>
<img src ="
<?php
echo UPLOADPATH . $userImage;
?>
" style = "position:absolute;" id="imageUser"/>
</div>
<div id ="imageReport">
<img src = "
<?php
echo $reportImage;
?>
" style = "opacity:0.25;height:700px; width:450px;" />
</div>
</div>
<div style="position:absolute; top:550px; left:100px;">
<p>Control User Image</p>
<input type=button onClick=move_user_img('up') value='Up'>
<input type=button onClick=move_user_img('left') value='Left'>
<input type=button onClick=move_user_img('right') value='right'>
<input type=button onClick=move_user_img('down') value='down'>
</div>
<div style="position:absolute; top:650px; left:100px;">
<p>Control Report Image</p>
<input type=button onClick=move_report_img('up') value='Up'>
<input type=button onClick=move_report_img('left') value='Left'>
<input type=button onClick=move_report_img('right') value='right'>
<input type=button onClick=move_report_img('down') value='down'>
</div>
I am trying to create a mobile safari compatible "slide to unlock" type deal, like the one on jailbreakme.com, i have found many that are compatible with google chrome, or firefox, but none with mobile safari, any help?
I want to Create a simple scanner app for the iPhone so when someone scans a URL embedded in a QR code, it opens the browser and loads that URL.
Hi Guys. Trying to pass variables from the javascript into my php script and into my SQL query so i can track the location of the iphone. So far i have... Code: <script type="text/javascript">
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
gpsText.innerText = "No GPS Functionality.";
}
}
long = position.coords.longitude;
lat = position.coords.latitude;
function gpsError(error) {
alert("GPS Error: "+error.code+", "+error.message);
}
function showGPS(position) {
gpsText.innerHTML = "<?php $long = "".$_GET['long'].""; $lat = "".$_GET['lat'].""; $sqldel = "INSERT INTO `location` (`id` ,`user_id` ,`long` ,`lat`) VALUES (NULL , '$user', '$long','$lat' );"; mysql_query($sqldel) or die(mysql_error()); echo "$long"; echo "$lat"; ?>";
}
</script>
This gets the coordinates in javascript and the php runs and i get a new record in the database but it doesnt pass the variables from java to php. Anyone know a workaround to get the variables from the iphone to sql on a single page? I want this to run in the background and refresh every now and then so i can track users location. thanks. Adam. This is for an iphone app using html5, css3 and javascript with phonegap to embed. The app runs on mobile safari. I have a list page [ list.html ] . Clicking on a list item takes the user to a specific page for that item [ e.g. item1.html ]. On item1.html page a question is answered in a form box. This is processed using a simple pasuser script which works fine. I need to add a script so that when a correct answer is given on item1.html a small graphic appears next to to the item listed on list.html. Even though item1.html can be accessed again later, the small graphic must always remain next to the listing. All help much appreciated. I am not a programmer but can understand the arguments. Thanks. hi, I am trying to redirect from my main site to my mobile site by detecting screen width using javascript. But everything time i try to test this via the iphone 4s,the browser keeps reloading without loading any content, like its on some sort of loop! Here are the scripts ive tried to used below, have i missed anything? [CODE] <script type="text/javascript" charset="utf-8"> if (navigator.userAgent.match(/(operamini|ipad|ipod|iphone|android|webOS|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafon e|o2|pocket|kindle|mobile|hiptop|\bpda|psp|treo|nokia|blackberry)/i)) { location.replace("example.com"); } </script> [CODE END] [CODE] <script type="text/javascript"> if (screen.width <= 550) window.location = 'http://yoursite.com/mobile'; </script> [CODE END] Thanks in advance for any help! Jon Hi On the following URL on the iphone and Ipad the jqzoom script is showing the enlarged image on the left but works fine in IE, Chrome, Firefox etc. The script in use is jqzoom. http://tinyurl.com/bwcxf8c Any idea welcome. Thanks Roy Hi Guys, I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full. I'm working on this project: http://bit.ly/tkrFsP It already works more or less fine in: IE7, IE8, IE9, FF, Chrome, Safari and Opera. Problems start when we try that in iPhone or iPad. iPhone works almost fine (except lags and AJAX/jQuery problems) but in iPad it has broken left navigation, wrongly re-sized thumbnails and it displays in half of the viewport. Also, there are problems with smoothness of jQuery animations and with AJAX unlike in other browsers on other devices (like PC). Any ideas on how to fix that? I've flicked through this: 1. http://www.smashingmagazine.com/2010...tting-started/ 2. http://developer.apple.com/library/s...62/_index.html It seems like a good place to start but there's many information on iPad/iPhone development on apple.com and their solutions don't fix my problems. -------- Mo 1. Anyone could outline here some basic code principles for iPad/iPhone? 2. Why project sub-page displays 5 times as large as it should on iPhone? Adding this: <meta name="viewport" content="width=device-width" /> doesn't help much and it even makes website work worse. Adding this: <meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=960" > seems like a better solution but it's not perfect either. 3. How iPad's fixed containers work? 4. Why there's horizontal scroll appearing even with overflow-x: hidden? I have a simple play js button on my HTML page as well as embedded music. So when you are a computer the music autoplays then stops and you have the option to listen to it again with the js button. This "theoretically" will work fine for the iPhone and iPad because even though the embedded music isn't auto playing the user can still click the listen button and hear the music. It works on the iPhone perfectly but not the iPad. I'm at a loss. Here is my jscript: function FFFFSound(soundobj) { var thissound= eval("document."+soundobj); thissound.Play(); } My embedded music: <embed src="music/FFFFKids.mp3" autostart="true" loop="false" hidden="true"> <embed src="music/FFFFKids.mp3" autostart="false" loop="false" hidden="true" name="sound1"> And my button: <input type="button" value="Listen" onClick="FFFFSound('sound1')" class="listen_button"> You can view the page at feefifofun.com I am at a total loss..... thanks! I have a video on a page, which on a pc or mac, will play inside a standard flash player. On the iphone, I have setup javascript to detect iphone / ipod, and replace the flash player with an embedded m4v file: Code: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('div#vid').empty('');
$('div#vid').html('<div ontouchstart="incrementHitcount()"><embed src="http://www.gridcity.co.nz/uploaded/images/'+cid+'_bg.jpg" href="http://www.gridcity.co.nz/uploaded/videos/'+cid+'.m4v" type="video/x-m4v" rel="nofollow" target="myself" width="'+vidwidth+'" height="'+vidheight+'" scale="1" id="iphone"></embed><div>');
}
So far so good. I also want to trigger a simple onclick which makes an ajax call a remote PHP file. I have tried ontouchstart instead (see above code) but still no luck. If I add the onclick to a static image rather than an embed instance, it works fine. But with the embedded video, it's as if the video blocks the onclick event for javascript to pickup. Does anyone know a way around this? |
|||||||