I have a problem with touch events in a phonegap application..
I have a parent div with 100% of device width/height and another element inside it with over 1000px width/height.
I am using javascript to drag the element around the container.. everything works fine on desktops but when it comes to mobile doesnt seem to work at all.
This is the example markup
<div id="borderBox" style="position:relative;border:1px solid black;width:520px;height:250px;overflow:hidden;">
<img id="draggableElement" src="http://tech.pro/_sotc/sites/default/files/202/images/duck.jpg" style="width:1024px;height:1024px;top:-333px;left:-500px;position:absolute;cursor:move;"/>
Here is the original code before I've changed the mouse events to touch events
This is the code I used
I wasted like 5 hours trying to find a fix, but unfortunately I found nothing that helped me with this..
Any help will be appreciated
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
There is a strange bug inside my App prototype using transform:translate(...).
The Mouse Wheel is not working properly inside the transformed view:
http://foods.rk.meteor.com/
If you click the category 'Alle' you will see the searchResults inside a list.
It is not possible to scroll with the Mouse Wheel. But if you resize the browser or focus the searchInput: Everything works fine.
If you go back to the categories and resize the browser or focus the searchInput: The Mouse Wheel doesn't work anymore.
In IE11 and Firefox everything works the way I want.
In Chrome Version 41 it doesn't work
I tried to replicate the issue without meteor, but it wasn't possible for me:
http://codepen.io/anon/pen/emwbjZ
Can you confirm the issue? Do you know a workaround?
Thanks
It looks like your scrollable css isn't handling it properly.
Edit your 'scrollable' class and add in the ability to scroll vertically. This doesn't happen naturally since it is not the top level div:
.scrollable {
overflow: scroll;
}
Your current setting is auto
I am using the jquery touch punch library to enable users to move images around via touch. This works fine in Chrome and Firefox but will not work in IE.
I find if I hold down on the image in IE a small square appears and I am able to drag the image within the boundaries of this square but no further. I guess this is the right click function kicking in.
I have looked around and most people are saying to add '-ms-touch-action: none' to the css of the draggable div. So I added that to the style attribute of the draggable div and it did nothing. I am still unable to drag in IE.
I've looked around for another alternative but am unable to find one. I have included jquery 1.8.1, jquery ui 1.8.23 and touch punch 0.2.2. Any help will be greatly appreciated.
I noticed the htm page I was launching containing the draggable div contained a meta tag which was emulating the page in IE9. 2 and a half days I spent on that! -ms-touch-action:none will definitely work in IE.
If you have come here and are experiencing the same issue but the above paragraph didnt fix it for you, try this:
In IE click the cog and go to Compatabilty View Settings and uncheck the box for Display intranet sites in Compatability View.
This issue seems to affect android only.
I'm working on a phonegap App for a client and I have a scrolling area using jQuery animate. However one of the nested divs doesn't move with it's parent div and stays fixed in position.
Again this issue only presents on android devices and works fine in desktop browsers and iOS.
Can anyone shed any light on what this may be?
Seems jQuery animate runs into issues with relatively positioned items, removed relative position and used margin and it seems to work now.
Right Now I am trying to set up a image zoom and the abilty to drag a enlarged image around in a contained box. The code I have for the desktop is show in this fiddle right here
The main problem I have is when i run this js in a mobile enviroment everything works except the ability to move the image around. I am sure my problem is that I am using onmousemove instead of outouchmove, I did on another fiddle right here that used that but still no dice.
So my question is am I not using ontouchmove right or if anyone has any suggestion it would be much helpful