I developed an app with jquery mobile ,but I want to scroll the content inside using the middle touch button of device. Currently I can scroll the page vertically but not horizontatly.
Try setting your page width to a value above 100%.
Not much else can be done to help you without posting code/what you've tired.
Related
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
Say you've got a Xcode app with embedded web view exposing a simple HTML5 page.
This page has a title and an input tag and a nav top bar (position: fixed; top:0;).
When the user tap in it the first time, the whole screen scrolls up to enable the keyboard appears while maintaining the input tag visible, when I tap the enter button.
The issue I face is that my HTML is not restored identically (I mean, it scrolls down back, but my top bar is shifted about 10 pixels below the top edge of the screen.
But when I tap the keyboard hide button, the scrolls restore my initial view, with no issue.
Anyone experienced the issue before? Any clue of what going on or a way to work around this?
Ps: issue is present on iOS 7 (7.1.2). I didn't tested on iOS 8 as my app must support iOS 7.
I finally ended up with adding an explicit keyboard withdrawing by applying blur() the the input as follows:
<input ng-change="$(this).blur()">
This immediately makes the keyboard disappearing, while the hw initial scrolling is reversed.
I'm working on an app which has buttons at the bottom of the screen(looks like tab bar). I found that if I enable the access to control center in app, there will be a notable delay between tapping on the buttons and the highlighted image showing. In fact the highlighted image will never show if I do not hold on the touch for at least about 0.5 second. I'm wondering if there is a way to disable the delay even the access of control center in app is ON so that users of my app will know the buttons did have been tapped. Any hint will be appreciated.
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
Is it possible to create a vertical swiped screen change in Phonegap - (as in the Facebook app where you can swipe left to view notifications).
I would like to contain 5 pages within the main app - but also be able to swipe left to view a separate page that contains a list of notifications / calendar items
Just wanted toi be sure this was possible before heading down that route..
Cheers
Paul
So you essentially want scrolling but by page? You could use the jQuery Mobile scrollview to get the functionality http://jquerymobile.com/demos/1.0a4.1/experiments/scrollview/scrollview-direction.html