I'm using dojo 1.9.2 and have developed a mobile browser app.
The app works fine on iOS and Andriod, but the Blackberry is an issue.
All my pages consist of a dojox/mobile/ScrollableView with very basic content (RoundedRectlist, and RoundedRect as examples)
The problem is that all the content that needs to scroll, only scrolls with the touch events, and nothing happens when the user uses the "Blackberry Mouse".
Device I'm testing on:
** Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.296 Mobile Safari/534.11+ **
Can anybody please tell me how to make this work?
I guess that by "Blackberry mouse" you refer to the trackpad that was present on models such as BB Torch 9860.
I think the key thing here is that, per design of these devices, the swipe gesture using the trackpad serves a different purpose: performing browser scroll at the level of the entire page. You can see such scroll active using the trackpad when the page is overflowing the screen size. Differently, the scrolling at the level of dojox/mobile/ScrollableView often concerns only part of the screen (the remaining being for instance headers and/or footers), and there can even be more than one scrollable area inside the page. Hence, it wouldn't be practical to scroll them using the trackpad, since it would first require to identify the element which should scroll - for that you'd need to click it, which may wrongly trigger a button action for instance.
Try for instance to scroll using the trackpad on this BB sample page: http://blackberry.github.io/WebWorks-Samples/kitchenSink/html/css3/overflow.html. It contains several scrollable areas, and the trackpad only allows to scroll the entire page, not the individual scrolling elements.
If in your dojox/mobile app you don't need fixed headers or footers, just use a dojox/mobile/View instead of ScrollableView. This way the content can overflow the page size, and you'll be able to scroll the entire page using the BB trackpad.
All in one, I think the behavior you observe is the expected one.
Related
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
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.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps
I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.
To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.
I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.
Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?
Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.
To determine that the keyboard is showing, you can use this solution:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.
If someone has a better hack, I'd really love to hear about it.
I am trying to implement facebook's live stream plugin on my website. I see that there is a scrollbar on pc and mac browsers, but not on iphone or ipad safari. I think it is because iphone and ipad treat scrollbar differently since they are both touch based devices. So I expect to scroll iframe with two fingers, but it does not work either.
Here is sample page (used a different src url) http://para.qacode.com/test.php
How do I enable two finger scrolling or normal scrollbar on ios safari?
On iOS versions prior to 5, you can scroll iframes on iPad/iPhone using two fingers, but this is a bit of a hidden feature and most people don't know about it. I'm not sure why tow-finger scrolling isn't working for your iframe - perhaps there is some JavaScript intercepting the touch event?
On iOS 5 this has been fixed and scrolling works as expected for iframes with one finger.
If you need to scroll a sub-region of the page on iOS 4 and earlier, the best bet is to use a library such as iScroll that implements scrolling with JavaScript touch-event handling.
Apply these styles to the parent container:
-webkit-overflow-scrolling:touch;
overflow:auto;