Glyn, I am even newer, and was looking at your code to learn a little. Where is variable 'photo' declared to make it visible inside function myTouch()? Regards Tim Romano Swarthmore PA
On Wed, Jun 16, 2010 at 8:36 AM, Glyn Szasz <[email protected]> wrote: > Hi All, > > I am very new to this world of web dev using webkit, javascript and css. > > I am trying to make an element on my page move when I swipe across the > iPad. I can capture the swipe and get the direction of the move. If I set my > img to have an id="myPhoto" the img element will move but when I move the > id="myPhoto" to a div or any other element (such as a ul) I get no movement > even though the swipe has been registered. > > I hope that this is the correct list to post this question to. If not could > you please point me in the direction. > > Thanks in advance, > Glyn Szasz > Sydney, Australia > > This is my html: > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > <html> > <head> > <title>My Test</title> > <meta content="yes" name="apple-mobile-web-app-capable"> > <meta name="apple-mobile-web-app-status-bar-style" content="black" > /> > <meta content="minimum-scale=1.0, width=device-width, > maximum-scale=0.6667,user-scalable=no" name="viewport"> > <link href="css/glynstyle.css" rel="stylesheet" type="text/css"> > <script src="javascript/main.js" type="text/javascript" language=" > JavaScript"> > </script> > </head> > <body id="theBody" onLoad="load();"> > <div id="myPhoto"> > <p>my paragraph<br>more text</p> > <img src="pages/ipad_vert1.JPG" alt="ipad_vert1" width="768" height=" > 1023"> > </div> > </body> > </html> > > This is the javascript: > function load() > { > photo = document.getElementById("myPhoto"); > photo.addEventListener("touchstart", myTouchStart, false); > photo.addEventListener("touchend", myTouchEnd, false); > i =0; > } > > function myTouchStart(event) { > event.preventDefault(); > touchXstart = event.touches[0].clientX; > targetID = event.touches[0].target.id; > // alert(targetID+" is targetID"); > } > > function myTouchEnd(event) { > event.preventDefault(); > touchXend = event.changedTouches[0].clientX; > myTouch(); > } > > function myTouch() { > > //whatMoveX = photo.x; > TouchDist = touchXstart - touchXend; > var currentPos = photo.x; > if (TouchDist >= 0) { > i = i-1; > moveDist = -(currentPos-100)*i; > photo.style.webkitTransform ='translateX('+moveDist+'px)'; > //alert("swipe right"); > } else { > i = i+1; > moveDist = (currentPos+100)*i; > photo.style.webkitTransform ='translateX('+moveDist+'px)'; > > > // alert("swipe is left"); > } > alert(i); > } > > > This is the css: > body { > > > margin: 0px; > padding: 0px; > background-color: #b9b9b9; > > > } > > #myPhoto { > -webkit-transition: all 1s; > } > > -- > You received this message because you are subscribed to the Google Groups > "iPhoneWebDev" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<iphonewebdev%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/iphonewebdev?hl=en. > -- You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
