1 Reply Latest reply on Jul 15, 2011 7:10 AM by sinious

    Creating a panorama, for use on a tablet (HTML5/CSS3/JS/PhoneGap/CS5.5)

    sinious Most Valuable Participant

      I'm looking for a way to do a panorama image that the user can simply drag left/right to pan the image and view around the panorama. Without a cursor this is becoming a bit difficult. Looking for some javascript/phonegap/jquerymobile/cs5.5 tips that might make this easier.

       

      jQuerymobile can tell you basic events like swipeleft, swipe, swiperight, tap, etc. What I'm interested in is when the user touches and drags their finger, I'd just like to slide the image. What I find is that javascript seems to "stop" the moment the onmousedown event occurs. I poll for the cursor position (event.clientX) but it's not updating until I let go. On a standard browser it dutifully keeps updating the value even though I have the mouse button down.

       

      What potential ways could I execute this horizontal sliding panorama using the above technologies in CS5.5/JS/CSS3/HTML5?

       

      Thanks for any tips!

        • 1. Re: Creating a panorama, for use on a tablet (HTML5/CSS3/JS/PhoneGap/CS5.5)
          sinious Most Valuable Participant

          I did find a nice resource on an exhaustive effort to check compatibility of various browsers and devices and to my suprise there's a mobile touchmove event I never knew about. This event fires off in both my iPad and Android tablet (and phones for that matter). The problem is, the data returned does not contain any kind of position information. It has clientX and pageX and such but they have no usable values.

           

          Here's a demo I'm using as an example. I just want to pan the large (randomly googled) image to the left and right when I drag my finger on it. I'm printing out the touchmove data that is returned along with a 'count' variable so you can see how many times it has fired off. Note: this only works on tablets/phones, not a desktop browser.

           

          Any tips on doing this?