harold-UIUX / jquery-ui-for-ipad-and-iphone

Automatically exported from code.google.com/p/jquery-ui-for-ipad-and-iphone
0 stars 0 forks source link

library prevents scrolling/resizing #1

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. go here: http://www.mrballistic.com/dms/people.php
2. drag glasses from top row to a face
3. try to scroll around the page or resize it

What is the expected output? What do you see instead?
pinch and swipe events should function. instead, only click events go through

What version of the product are you using? On what operating system?
version from aug 26th. running on an iphone 4/ios 4.02/mobile safari. works 
fine on desktop machines.

Please provide any additional information below.
what a great library! i'm mostly just stoked to see my drag and drop stuff 
functioning at all :)

Original issue reported on code.google.com by mrballis...@gmail.com on 31 Aug 2010 at 7:19

GoogleCodeExporter commented 9 years ago
Very good point.
I developed an intranet application that does not allow re-sizing (however that 
was disabled using a meta tag <meta name="viewport" 
content="width=device-width; initial-scale=1.0; user-scalable=0;" />)

So I never tested for pinch or zoom functionality. I did hope that the: 
"event.touches.length > 1" check would mitigate that issue however and 
scrolling could be achieved using two fingers, at least I hope. I don't 
actually own an iPad to test with.

In short I don't have the time to come up with a solution however if you find a 
fix will gladly integrate it.
As a betting man I'd say monitoring gesture events might hold the solution.

At the moment I'm preventing default behavior and manually emulating the 
default behavior (without checking for onclick handlers)to provide some extra 
functionality.
See here:
http://developer.apple.com/safari/library/documentation/appleapplications/refere
nce/safariwebcontent/handlingevents/handlingevents.html

Original comment by taka...@gmail.com on 5 Sep 2010 at 6:41

GoogleCodeExporter commented 9 years ago
Just downloaded the .js file...

I added the .js file to my page at 

http://www.thalasoft.com/elearning/exercise/55/page/201/subscription/

(You have to click on the Servir link)

but it prevented the page scrolling on my iPod 3.1.3.

So I had to remove the .js file.

Original comment by mittipro...@gmail.com on 23 Sep 2010 at 11:20

GoogleCodeExporter commented 9 years ago
you might want to change the dispatchEvent line like:

if(!first.target.dispatchEvent(simulatedEvent))
    event.preventDefault();

that way the default event only gets prevented if the original event intended 
that.

Original comment by Leh...@gmail.com on 22 Dec 2010 at 5:13

GoogleCodeExporter commented 9 years ago
Any updates on this issues? This is a great little piece of code and even with 
limited knowledge of js/jquery I was able to get this working. However with the 
fact that it stops the scrollbar from working seems like a big issue (at least 
it is for me). 

Any help on implementing a solution would be hugely appreciated (like I said I 
don't know enough to troubleshoot the problem myself).

Original comment by dustintu...@gmail.com on 12 Feb 2011 at 6:53

GoogleCodeExporter commented 9 years ago
To fix the issue, you can define the target correctly..i.e. instead of having 
the entire document as the listener for your touch events, you should define 
the target correctly..So just need to modify as below;

if ($.support.touch) {
        var obj = document.getElementsByClassName('target_area_divs');
            for(i=0; i<obj.length;i++){
                obj[i].addEventListener("touchstart", iPadTouchHandler, false);
                obj[i].addEventListener("touchmove", iPadTouchHandler, false);
                obj[i].addEventListener("touchend", iPadTouchHandler, false);
                obj[i].addEventListener("touchcancel", iPadTouchHandler, false);
            }
    }

This should fix the issue..

Original comment by pfanswer...@gmail.com on 18 May 2011 at 11:02

GoogleCodeExporter commented 9 years ago
I had the same problem and tried the last solution which worked well. I use the 
class name ui-container in place of target_area_divs. Then I assigned this 
class to any elements containing UI elements. 

Original comment by soggy...@gmail.com on 12 Aug 2011 at 8:31

GoogleCodeExporter commented 9 years ago
Comment 5 worked for me.  It allowed me to specify which divs I wanted to use 
the touch features, allowing the remaining divs/page to accept the usual touch 
features.

Original comment by kelly.sh...@gmail.com on 18 Aug 2011 at 5:21

GoogleCodeExporter commented 9 years ago
I wonder if someone could clarify how to implement the fix in comment 5?  In 
the .js file I replaced the section beginning if ($.support.touch) { with the 
proposed code.  In the html I added:
  <div  class="target_area_divs" style="height: 480px; width: 500px">
    <ul id="carousel{count}" style="display: none;">
       {yacht[oneimage]}

    </ul>
</div>

To my template where the images are loaded.

The outcome is that scrolling is achieved but image sliding does not work.  
When I revert to original .js the images slide but the scrolling does not work!

Original comment by j...@pigsbladder.com on 6 Jan 2012 at 12:03

GoogleCodeExporter commented 9 years ago
Thanks for all the great work on this plugin. I 'forked' this project on GitHub 
and made some of the modifications mentioned above. It is working successfully 
for me on iOS (iPad 2) and Android 2.2.

You can grab the code here:
https://github.com/joshgerdes/jquery.ui.touch

Thanks!

Original comment by joshger...@gmail.com on 20 Jan 2012 at 5:27