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];
}
Related
While attempting to make a game using Canvas I noticed a few quirks on tablet / phone browsers.
1) How do I disable the Canvas from being selectable? It seems like when the user touches it, it highlights the canvas, and almost makes an attempt to select it. This is undesired.
2) Browser slide gestures. Some browser have slide gestures that override any movement capturing done in the canvas or webpage. This is extremely annoying and undesired as well.
3) Canvas control with HTML UI elements. I noticed when there is a canvas present with fellow ui elements (such as text) sometimes clicking or dragging in the canvas will highlight a part of the HTML and instead drags the HTML elements instead of hitting the canvas.
Any help is greatly appreciated! I was hoping HTML5 would be mature enough to allow for good compatibility on mobile as well as desktop. The idea is to be able to code once and play everywhere....thanks!
This should fix your issues relating to #1 and #3:
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);
#2 seems like an awfully separate question, but I've never had a problem with slide gestures overriding any of my canvas stuff. Try using e.preventDefault(); at the beginning of your touch events.
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
my goal is to build a short HTML/CSS3/JavaScript animation that will be plugged into an iPad web app. What I'm essentially after is a canvas (image) that will have several regions the user can tap to zoom to and get additional info in a popup (overlay box) for each.
I can code HTML/CSS prety well but my JavaScript skills a a bit behind.
I was wondering if there is any sort of software/toolkit that I can use to achieve what I'm after. I did look into Sencha Animator (the interractivity I'm after seems to be missing), PhoneGap and jQTouch dont have the animation capabilities (except for few sliding/fading transitions).
Any suggestions?
Indeed! Adobe released one in DW CS5. I've personally never tried it but here is the link to the announcement:
http://blogs.adobe.com/designandweb/2010/05/moving_the_web_forward.html
Im looking for (if possible) javascript libraries/plugins to provide swipe events.
However I am not after the simple detection of a swipe, for example what jqTouch provides. I wish to create behavior similar to that of the images viewer on the iPod devices. So for example you drag left or right to go to the next image. You have to drag the image over 50% of the way and let go and it will snap to the next image. If you do not drag 50% of the image, it just snaps back to the original.
Any advice appreciated. Thanks.
I think you might be looking for something like the Carousel component in Sencha Touch (view on iPad/iPhone or Chrome/Safari). This has the behavior you want built in. [I work for Sencha]
Here is a standalone solution for your problem:
http://swipejs.com/
The more general solution to javascript swipe events can be found here:
https://github.com/eikes/jquery.swipe-events.js
I've been testing out the new functionality of html5 and js to create a sketching site. I've been looking into this for a possible client that wants their site to be ipad accessible, but also have drawing features on it.
So i created a rough experiment where you can drag your mouse across a screen to draw lines. I went to test it on an ipad and realized this doesn't work. Why? because dragging on an ipad is reserved for actually dragging the screen around.
Is there something you can do to get around this? I'm sure this could be done if made for an app, but what about just a normal website.
In your code, replace your events like that:
onmousedown => ontouchstart
onmousemove => ontouchmove
onmouseup => ontouchend
At least that is how it works on iPhones. Further reading: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Shameless self promotion - I developed a jQuery plugin for drawing on a website via HTML5 for the purpose of collecting signatures on the iPad screen. http://www.crowdsavings.com/open-source/drawbox