make long pages scroll in hybrid app (phonegap + jquery mobile) - jquery-mobile

I have a JQM 1.4 + Phonegap 3.3 app in which there is a long text page. I would like it to be scrollable. But the touch scroll doesn't work in Android 2.3.
How to fix this ?
Thanks

CSS overflow scroll doesn't work on android 2.x, so you have to do that by yourself. Some solution here:
use javascript plugin, like iScroll or touchScroll
make scroll button.

Related

fixed positioned button in mobile website

I am building a mobile website and need a fixed positioned button (for quick link to scroll to top) that should move across while scrolling the screen. fixed position is not supported by mobile browsers. Can anyone suggest the way around for the same. I am using twitter bootstrap. I have observed fixed position header and footers for mobile in jquery mobile framework but could use it in twitter bootstrap page.
Thanks in advance.
You can use a navbar-fixed-top or navbar-fixed-bottom navbar on your site and that will function properly on mobile devices. Refer to the Optional Display variations section under navbars http://twitter.github.com/bootstrap/components.html#navbar.

Is there any way to handle the flickering screen in jQuery mobile

I am using jQuery mobile 1.1.0 and I am facing a problem that when I run the application in the browser it works fine but when I run this through 'Home screen icon' it starts flickering the pages.
I am using iphone 5.1.
Does anybody have a solution for this issue?
You need to update to jQM 1.1.1, screen flickering issues have been fixed in this version. This problem affected running jQM in UIWebView container like PhoneGap, but I assume it's similar when you save it on the home screen.
Try updating and see if it'll fix your problem.
Announcing jQuery Mobile 1.1.1
It's because of the page transitions. If you disable them globally for the time being, you'll fix your problem. It sucks to lose the transitions, but the white "flash" is far worse.
Here's the docs on disabling page transitions: http://jquerymobile.com/test/docs/api/globalconfig.html

jQuery Mobile - make fixed header not fade out when scrolling

I'm trying to have a fixed header for my jQuery Mobile project like this demo page.
I've tried the attributes of data-position="fixed" data-fullscreen="true", however my header isn't visible as you scroll and then fades in. How can I remove this fade in / out functionally?
I have found this similar question but I think it might be outdated as although they discuss the issue they don't mention this demo page which seems to do what they need:
Which version of JQuery Mobile are you using? The "True fixed toolbars" were added to the last version jQuery Mobile 1.1.0 Final. Check it at http://bit.ly/JjPmwo

navbar phonegap plugin

I would like to add a navigation bar at the top of "some" of my phonegap based ios application pages. I have tried using JQM based headers and they don't seem to be steady enough ( i.e. they scroll when I scroll the content and jump back). I would like to use a native control using a phonegap plugin ( like NativeControls) However I haven't been able to find anything ( as far as I can tell NativeControls used to have navbar control but it got discontinued) Any ideas? suggestions?
One of the options is to use a tool bar control on the top of the page but then it does not really have a way to create a title in the middle and buttons on left and right. Also it has no way of adding the native "back" control either.
I have been researching it for a while but haven't been able to find anything.
Update:
I ended up writing my own Navbar and hooking it to a javascript call through phonegap
Checkout this edited plugin for UINavigationbar
https://groups.google.com/forum/?fromgroups#!topic/phonegap/XVru2zgB_yc
I've had this problem too. Didn't find any plugins for this also.
This is what I did:
I've created a CSS NavBar/TopBar with position:fixed
Used this solution to make it work on iOS 4 too: Fix position:fixed in iOS 4

Using a scroll in jQueryMobile + PhoneGap

I've seen some ScrollView examples on the JqueryMobile website. I tried to dowload the required additional css and js files, reference them, and setup a scrollviewer, but it doesn't work (actually, all my website stops working, showing only a white-empty page).
Any idea or alternative?
Thanks!
As alternatives, you can have a look at iscroll and a jquery plugin touch-scroll.

Resources