So I am making a web map app with leaflet/rails and since I am the only developer I am going to just do a responsive design instead of making an entirely new mobile app. I am having trouble figuring out what the most friendly ui is for desktop and mobile.
Right now I am doing something similar to foursquare as shown here, https://foursquare.com/explore?mode=url&near=Minneapolis&q=tacos.
So when you hover it pops up, then when you click the marker it stays open. Foursquare has an entirely separate mobile app though and it's clear from their site that you aren't supposed to use it for mobile. I want to know though if this configuration is mobile friendly, so if a user clicks the marker it will simply just stay open and the hover effect will not do anything.
Is this a good way to go about it or is there an accepted way to do mobile marker events?
I am new to web maps, especially making them responsive/mobile friendly so any ideas are welcome.
Thought I'd share what I've found so far. When on mobile hover basically goes away and click is replaced with tap. Hover still sometimes come in when the user does an abnormal slight click.
Related
We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.
Open the app from the homescreen
Use the app for a while
Put it into background
Turn off the screen for a while
Turn the screen back on and put the app to foreground again
The bug is that nothing seems to happen when you click on a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus on click, but not options are shown.
Now it really becomes strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.
So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.
It seems to be for all native safari controls that shows some kind of modal/popover.
I've did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318
It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I've just started making an iPad app using Phonegap.
On one of my pages I access the camera, take a picture, display that picture on the page and then have a number of customisable options (resizing, positioning of other elements that can be dragged on top of the image etc)
Once you click on a different link (tab bar item) however, all of this information is lost and you have to start over once you go back to the photo page. Is there a way to capture the web page in it's current state, or even grab each elements information (position on page, last photo taken etc) individually so that when the user goes back to the next screen, everything loads as it were when the user left the screen.
Hope this makes sense and someone can help! Thanks in advance!
I'm just a beginner Phonegap developer myself, but I believe you probably want to look into localStorage. http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage
You'll need to use JavaScript (and perhaps a library like jQuery) to get various data about the page's current state. Once you know them, you should be able to to store them for retrieval in subsequent sessions later via localStorage.
I hope this helps.
I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.
I am developing a web iPad app using Sencha Touch framework.
As it is a JS and Html5 framework It allows me to use cashing and work offline.
If I use the "+" button on iPad's Safari I can ad the icon/ shortcut to the home screen and make it behave as a native app (work without safari's address bar).
I was wandering would it be possible to create a button on the web page that would have the same functionality as the "+" button - so it allows users to add a web app shortcut to their ipad's home screens directly from the web page.
Is it possible? Can JS deal with it using apple's API?
Sorry, but this isn't possible. (JavaScript has no access to any special Apple API's - merely some additional events for touch handlers, etc.)
If it was, you can imagine that it would be trivial for any web site to automate this process (fake the user pressing the in-page "add" button) and hence add itself to the user's home screen without their permission.