I've searched around for lots of different jQuery libraries to add pinch/zoom functionality for mobile devices (like touchy.js, PhotoSwipe, TouchSwipe, hammer.js etc.) but I don't know what I should be looking for to solve this particular issue.
I need to create a simple game, very similar to "Where's Waldo?", where the user is giving a large image to scroll around (almost like Google maps), trying to find an item. When they find it, I need to take their "tap" co-ords -- taking into account the zoom level -- and see if they're right.
I feel like there's probably a library somewhere that already does 90% of what I need out of the box, but I don't know what this functionality is called. Is there such a library for this functionality?
Why don't you use the built-in pinch zoom feature? This would save you from having to do extraneous position calculations, touch listeners, etc.
<meta name="viewport" content="initial-scale = 0.1,maximum-scale = 1.0" />
Related
I'm trying to build a Point of Sale app for ChromeOS using HTML5 and JavaScript. I'm using Materialize and jQuery for front end. When I try typing a number very quickly using the on-screen number pad, sometimes numbers are skipped. A good example would be trying to type 1752703, since it's my employee ID at my current job. Even though the CSS effect engages to show I pushed all the numbers (the ripple effect), I may end up with something like 17203 instead of the full number.
Is there any way I can improve touch performance? Is it the type of screen I'm using? What could be causing this to happen? If it's because my Chromebook is capacitive, it's not a big deal, because I could deploy this on any device I could get Chromium OS to run on. But if it's something programmatical that I can improve, that's the first step I'd like to take.
Here is the basic code I'm using for just punching in a whole number:
$(".numBtn").click(function(){
input(Number($(this).text()));
});
And here is an example of it in action (apologies for lack of styling):
Live Demo
First
The problem seems not to be the device itself, but rather the effect of having a touch-enabled device which supports pinch zooming.
On most of these devices, by default, there is a 300-350 ms on-click delay which allows most of the users to double click, or as mentioned, pinch zoom.
Google has brought a solution for this issue in 2014, when they have removed this delay by still keeping the pinch zoom function on.(1)
The quick fix for this is only one line of code in the <head>
<meta name="viewport" content="width=device-width">
This meta tag is going to disable pinch zoom for your website only by telling the browser "this is how I need to be displayed, so there's no need for zooming in the page". The purpose of it is mainly to allow a better user experience in websites with responsive design.
I have tested your website with the new meta tag and the delay seems to disappear. There is still a very small delay when you tap very fast, but the most of the users won't be able to do it such quickly.
Second
Another potential solution is to use a plugin called Tappy which replaces the click event with a tap one, promising "that it will allow you to execute code immediately on touch devices, eliminating the 300ms delay that click events have(2)."
The plugin repository can be found [here][3], where you can also look at the implementation instructions - especially at this one, which is a modified version that binds the tap event to all <a> elements:
$(document).ready(function(){
$("a").each(function(){
$(this).bind("tap", function(){
window.location.href = this.href;
});
});
});
Note that you will need jQuery to use this plugin. In case you don't use jQuery, write a comment and I will provide a vanilla JavaScript (potential) solution.
References
(1): https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
(2): https://github.com/filamentgroup/tappy/#why
I'm using leaflet in a PhoneGap project, with offline map tiles. Everything technically works just fine. However I'm finding that it is very hard to get the click event to fire on the paths, requiring the user to do a lot of frustrating tapping over and over in the same spot until it finally fires.
These aren't teeny tiny paths. Think bike paths in a mid-sized city, spiderwebbed everywhere.
Is this just something I have to live with with leaflet, or are there some tips and tricks to make the maps more touch friendly?
EDIT: And if not: is there a better way to do PhoneGap / Web based cached maps with better touch responsiveness?
As Leaflet.js claims to already have been mobile-optimized with the following thing
Multi-touch zoom (iOS, Android 4+, Win8)
Double tap zoom
Various events: click (tap), mouseover, contextmenu, etc
Tap delay elimination on mobile devices
I do not think there is much you can do to improve the touch-friendliness of it, unfortunately.
For those interested, about the only solution I've come up with on this one was to simply make the lines thicker. I chose a weight of "8" which seems to work slightly better for my fat, sausage like fingers on my iPhone, but you'll want to test different devices and see what works for you.
You might also want to adjust your opacity too, as the larger lines will overlap more and might not look the greatest in congested path areas.
It can be difficult to use (webpage) sliders that cover a large range with fine granularity. On the one hand, it is easy to move across the range. On the other hand, it is difficult to locate the exact point one wants, assuming a fine enough granularity.
I was thinking that a magnify effect around the cursor could solve this problem (assuming the problem really exists).
I looked for existing solutions or ideas via google, but couldn't find anything.
Any suggestions here?
I doubt if this is what you're looking for, but... within Mac OSX, holding down the control key and moving the scroll wheel will zoom in and out.
I'm having trouble thinking of a scenario where having so much data that scrolling of this nature would be a problem you'd want to have. In almost all scenarios it makes more sense to chunk up the data or reduce it down in some other way.
About the only thing that makes sense is the seek-bar/scrubber on a video player. If your player is 400px wide with a 360px wide scrubber, but the video is an hour long, the best granularity you'll get is 10 seconds-per-step (with the step-size being 1 pixel).
If that isn't enough granularity, then it's possible you'll need to augment your scrubber with another UI convention - which could be a magnifier - but it could also be other things. Like a "jump to point" text field that would allow to user to entire a time and seek to that exact position.
It sounds like you're going for something (visually) like the OS X dock. This is called a fish-eye effect. There's a jQuery plugin for a fish eye menu which you may be able adapt and merge with a slider to give you the functionality that you're looking for.
I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these
elements in order to reconstruct the whole mockup website later.
Maybe a grid system would be the best?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?
Regards,
Stefan
YUI has lots of widgets for this sorta thing with lots of examples.
Drag & Drop: Examples
Especially this example
Drag & Drop: Using Interaction Groups
All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.
ALSO, if you want to do resizing as well
Resize Utility: Examples
They have a few really neat examples, including this image cropper
ImageCropper Control: Real Time Crop Feedback
The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)
EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.
Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):
DP_PanelManager
"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).
Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).
In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.