|
JavaScript - Moving Image When Ipad Is Tilted
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 Similar TutorialsHi 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. Hello, 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, 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 : 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>
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 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 ")" ._. 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 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>
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>
Ok, so I have multiple issues, but this is the one I have not been able to work around. I'm building a simple website for personal use, so I know it only has to work on Safari for the iPad, a simple catalog of song charts for use on stage in my piano bar. Everything works GREAT in Safari/Chrome for Windows 7, but doesn't seem to quite work on Safari for iPad. The issue I'm having is I've set up a DIV with two image buttons on it to execute a ScrollBy command to scroll the page up or down depending on the button. Everything works great on Safari for Windows 7, as in I can keep scrolling down the page by pressing the scroll down button multiple times. On iPad, it only works once, and will not continue to scroll. I've also tried it in Atomic Lite for iPad, with the same effect. I've mocked up a simple page, to take all the other variables out. http://www.duelingpianopiano.com/jef...testscroll.htm Eventually, I will be installing it he http://www.duelingpianopiano.com/jef...testscroll.htm The code in the head tag is below: <code> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2003, Sandeep Gangadharan --> <!-- For more free scripts go to http://sivamdesign.com/scripts/ --> <!-- var y1 = 510; // change the # on the left to adjuct the Y co-ordinate (document.getElementById) ? dom = true : dom = false; function hideIt() { if (dom) {document.getElementById("layer1").style.visibility='hidden';} } function showIt() { if (dom) {document.getElementById("layer1").style.visibility='visible';} } function placeIt() { if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";} if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";} window.setTimeout("placeIt()", 10); } // --> </script> <script language="JavaScript"> function scrollup(){ parent.scrollBy(0,-window.innerHeight-50); } function scrolldown(){ parent.scrollBy(0,window.innerHeight-50); } </script> </code> The code from the body tag: <code> <body topmargin="00" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFF00" bgcolor="#FFFFFF" "overflow: visible" onLoad="placeIt(); showIt()"> INSERT CONTENT HERE <div id="layer1" style="position:absolute; right:0; width:50px; height:150px; visibility:hidden"> <font face="verdana, arial, helvetica, sans-serif" size="2"> <div style="float:left; background-color: ; padding:0px; border:0px solid black"> <img src="upbutton.png" width=50 height=75 border="0" align="left" onClick="scrollup();"> <img src="downbutton.png" width=50 height=75 border="0" align="left" onClick="scrolldown();"> </div> </code> Like I said, it works just as needed in Safari/Chrome for Windows 7, but not on iPad. Doesn't seem to work in IE 8, but that doesn't bother me. I have not tested in FireFox. Your ideas are much appreciated. I'm not an Apple person, so maybe there is a well known issue with scrollBy and Safari for iPad, that I'm not aware of. If that is the case, if anyone has an idea for a direction for a workaround that would be great as well. Eventually, I would like to use the smooth scrolling scripts that I've seen out there, but that is way down the road. I'm more worried about the functionality as is. Quick question, I found this code snip on stackoverflow and it has one little bug. When you touch / move in the element, the console.log is being fired. If you continue to drag / move outside the element, the console.logs still continue to fire. So it seems that once the event is started it's no longer confined to the element its being assigned to. Any ideas on how to keep it bound to the element? Here is the code: Code: $('#someElm').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
console.log(touch.pageY+' '+touch.pageX);
});
Thanks in advanced. The web page belows works OK in IE and FireFox on XP and Windows7 It does NOT work on IPAD using Safari. Question: How can I delete the new window("IPADREPORT") when I run it the second, third,fourth, etc time ? How can I get the window name( "IPADREPORT") to see if it exists? SUggestions? TIA, Steve42 <code> [aSafari.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <script language="JavaScript" type="text/javascript"> function pReport(){ // 1-17-12 var menuWindow = open("","ipadreport"); // 1-17-12 menuWindow.close(); // above closes previous report window var menuWindow = window.open('','ipadreport');// 1-17-12 document.ipadreport.submit(); menuWindow.focus(); } </script> <title>Ipad_PopUp_Test</title> </head> <body> <br><br> <form method=post name="ireport" target="ipadreport" action="http://myreport.asp"> <input type="hidden" name="reporttest" value="apple"> <a href='javascriptReport()'> Create Report</a> </form> </body> </html> </code> 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 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? 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. In javascript normally when you call .focus() on a textbox id, it places the cursor inside the textbox. Trying the same on ipad does not place the cursor in the text field and the keypad does not pop up. How to place cursor and bring up the keypad on ipad using javascript? Any help is appreciated 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! Hello I'm having problems with a very simple bit of Javascript not working with the latest version of Safari for ipads and iphones. The script in question is used as a 'previous image ' and 'next image' navigation facility, basically closing one pop-up window and opening up another, when viewing a photo gallery. It has worked perfectly for a number of years on all browsers. It is only the latest version of Safari for ipads and iphones where there's a problem. On an iphone, the new window unfortunately opens up in a new tab and the existing window fails to close. Mobile Safari soon reaches the maximum of 8 permissible tabs as a user moves through the photos gallery. On an ipad2, no new window opens and the existing window fails to close. the website is www.gethigh.co.uk Code:
}
function picPopup4(page,width,height){
//alert(scroll);
var a;
a = width / 2;
var b;
b = height / 2;
var LeftPosition = (screen.width/2) - a;
var TopPosition = (screen.height/2) - b;
window.open(page, "", "width="+width+",height="+height+",toolbar=no,header=no,location=no,resizable=yes,"+"left="+LeftPosition +",top="+TopPosition+",scrollbars=yes");
window.close();
}
and this is an example of the code creating the navigation within each pop-up window Code:
<tr>
<td align="center"><a class="link8" href="javascript:picPopup4('legslip1.html','560','770');" target="_self">
previous image</a> <a class="link8" href="javascript:window.close()">close
window</a> <a class="link8" href="javascript:picPopup4('breaking2.html','505','800');" target="_self">next
image</a></td>
</tr>
I'll come clean and admit I'm not a programmer and have a very basic and ancient understanding of HTML coding. My website must be approaching double digit years old (which will be immediately apparent if you view its structure). I can usually resolve most things, and maintain its functioanality when needs be, but this particular problem has got me stumped. I've come onto this forum to see if anyone could provide a simple work-around ? Or if anyone would know if this is a bug within Safari which may be rectified soon (a search through the Apple forums gave no clues). I'm loathed to make any major updates/changes to my site, as despite its age it renders beautifully on all browsers except the latest ipad/iphone Safari. Cheers and hopefully thanks in advance Garry .... hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
|
|||||||