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
Related
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
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.
I'm trying to simulate the iPhone's lock screen and the slider on the front is working mostly but when I click it it jumps forward weirdly. Also if I drag it from the right side it does the same thing but then it stops going and I actually stop dragging the slider and it's really annoying. I have an example of what's goin on here:
Slider Test
I've looked a lot of places and similar questions, but the answers were sadly unhelpful for me, one of those being setting the margin-left:-35px;. Thanks in advance
It works lika a charm in latest Chrome. The weird behavior of jQuery scripts is usually caused by a relatively slow PC or web browser.
What is your PC's configuration and which browser are you using?
Update
I would definitely remove arrow image and instead use that image as an background of the link (id="unlock-handle"). This fixes "drag and drop" issue in Chrome.
Hi was wondering if anyone knows how to make a magnifying glass effect for text on the iPhone. There are so many JavaScript examples online for how to do this for images and there are even a few that are designed for text, however none of these work with touch and drag on a mobile device.
Im a bit of a noobie with HTML and JavaScript so any help would be appreciated. (by the way I know the iPhone has a built in magnify but I need it to be a lot bigger and zoom farther)
Cheers
you can check out this for your idea, this demo implement the effect
http://www.craftymind.com/creating-the-loupe-or-magnifying-glass-effect-on-the-iphone/
the main code is like this
- (void)drawRect:(CGRect)rect {
// here we're just doing some transforms on the view we're magnifying,
// and rendering that view directly into this view,
// rather than the previous method of copying an image.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context,1*(self.frame.size.width*0.5),1*(self.frame.size.height*0.5));
CGContextScaleCTM(context, 1.5, 1.5);
CGContextTranslateCTM(context,-1*(touchPoint.x),-1*(touchPoint.y));
[self.viewToMagnify.layer renderInContext:context];
}
I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!
i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.