I'm building a phonegap(cordova) application and it is working great for android, but there is some scrolling issue with iOS build i-e i cannot scroll pages from anywhere on the screen except the middle-right and middle-left of the screen and that area is very less, i want to scroll by swiping anywhere on the screen just like it works in Android.
Anyone else faces the same issue, share your knowledge and experience.
Although without a code sample it is difficult to advice.. I had similar experiences in ios phonegap development and you need to be sure that the css overflow attribute is correctly setup for all elements.
One major 'trick' that you need is to add
-webkit-overflow-scrolling: touch;
To the container you like to scroll.
See this page for info about the css property.
Related
I was creating an app with Cordova that contains a CSS Grid Layout. The problem is that it shows on some devices and on the others, the elements are on top of each other. I think the problem comes from webkit versions that don't support Grid Layout. So my question is, can I force the use of a certain version of webkit so this works? I also would like to know which version I should force for it to work. Here's an example of a CSS Grid Layout
Your help would be greatly appreciated!
Cordova uses the webview app that is installed in the device by default. If you wish to use another webview, you need to embed it in your app. Something like Crosswalk can assure you to use only the webview you provide.
I'm currently working on an Android app that displays a simple html-document with some css. However, the html changes based on the day, once I've gotten that implemented at least, so there will some days where it will have more elements than it did previously. Now, where the problem lies, is that when there are a many elements, the bottom ones won't show. They are hidden outside the screen, and there is no scrolling.
How would I go about making the page scrollable? This is only for android. I can't use iScroll, seeing that it requires a list-structure in the html, which I don't have and it would be a pain to rewrite the script that makes the html file :/
Thanks
I'm having problems displaying my club's website, specifically on Android version 4.1 and 4.2's default browser:
http://www.manchesterhandballclub.co.uk/index.html
Everything loads as normal for a split second, before everything in the #maincontent div disappears, except for the Twitter and Facebook widgets on the homepage (/index.html), or the embedded Google Maps on the Training Info page (/training_info.html).
I wondered if there was maybe some sort of z-index issue on load, but there shouldn't be anything overlaying on top of the container div to my knowledge. Here's a preview of what the homepage looks like once the main div disappears:
http://tinypic.com/r/4l1zya/5
I don't have any experience designing for mobile devices, and whilst I do plan to build responsive device-friendly versions eventually, it'd be great if I could get the current site displaying as it does on all other Android versions for now. I'm not sure if there's any version-specific quirks or things I may have missed?
Thanks in advance, and apologies if I've not posted this in the correct way! Tried searching around but can't seem to find any help on the issue currently.
Does anyone have a clue what could cause this behavior? If you view this page on Android 2.3 or Blackberry, you should see the problem.
You can scroll straight past the end of the page to a yellow background that goes on forever. You can also scroll off the right side of the page to do the same thing.
It works fine on Android 4 and iOS 5.
See site with issue here:
http://wwwa1nbkclientsitecom.zippysites.com/
p.s. I asked about this yesterday but with less detail. And I've made some changes sense then, but those didn't fix the problem.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.
I am planning to implement Honeycomb tablet application based on WebView (so, basically it'll be a HTML5 web based application made only for tablet).
I am looking to implement horizontal and vertical scrolling by swiping finger. For better understanding I created sample outline.
This image shows something similar to Honeycomb's native setting activity with left and right page vertically scrollable
Any kind of guides or resources are welcome. Thanks
Take a look at iScroll:
iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.
While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs...
Here is what I have found so far:
It depends on how you want to implement scrolling. If you want to attached swiping event, thats the easiest way to implement using well known libraries:
jqTouch - It has swipe left and right event which can be hooked to scroll left or right (it seems all the webkit based animations work only on iOS devices). Please note that project is still in beta and not highly active. EDIT: this is also part of Sencha Labs - who actively maintains Sencha Touch.
Sencha Touch - They have better support for almost everything in mobile and tablet. (Note: It's free for opensource apps but not for commercial apps - EDIT: they actually have commercial license. see their site for more info on licensing)
jQueryMobile - They are very stable (in RC1 as of now), and has swipe left and right event, but I could not find swipe up or down. If you just need swipe left right, tap, tap hold, then go with jQM. They have the best community support.
RAW JS - Finally, if you want something raw javascript, visit HTML5Rocks article to have better in-depth idea about how touch event works.
I hope it helps. I'm still struggling to implement scroll up down, since I don't want to wait for swipe to end, instead I am trying to implement instant scroll feedback, getting very close using RAW JS coordinates, but not satisfactory.
Hammer JS has been useful for me:
http://eightmedia.github.io/hammer.js/
From the creators of iScroll, SwipeView seems a nice dedicated alternative. Have a look at demo 1 and demo 2.
I have not tested yet, but I will surely. Since demos behave well on my iPad.
You might find this library quite useful: https://github.com/cubiq/2-way-iScroll
It handles the case of vertical scroll and horizontal swipe.