I am creating a mobile webapp for windows phone 7.5 devices and would like a box with overflow:scroll to scroll smoothly (not stop when you release the content on scrolling with your finger).
Now for iOS this exists: -webkit-overflow-scrolling:touch;
Is there any similar thing for WP7? I tried overflow-scrolling:touch; and -ms-overflow-scrolling:touch; but those do not work.
Is there an online resource for WP7.5 web development?
Any javascript alternative?
Thanks for your help!
I believe the only way to do it is using a JavaScript Scrolling to replace the default auto scroll.
Take a look at iScroll or something similar
Related
I am using fullpage.js with the "fullpane" theme on my wordpress.
When I open the site on my phone and scroll down, everything looks good and the content containers are where they are supposed to be.
BUT when I scroll up, the position of the content containers is being messed up and they are positioned much higher.
I was able to replicate the problem with multiple browsers (Chrome, Firefox) on Android and iOS and multiple phones.
Interestingly, the problem doesn't persist when I try it in the mobile view of Chrome developer tools.
Thanks in advance for any advice!
Update: I refunded the wordpress theme above and created my own theme.
I am developing a mobile web app. Is it possible to prevent orientation change? I want only portrait view. I was looking for some JavaScript solution, but could not find one. I am just using jQuery (no jQuery mobile). Thanks in advance.
I created dynamic list using android phonegap application.Now I want to add scrollbar for that list. I used html and javascript/jquery for creating dynamic list in android phonegap application.how to add scrollbar dynamically to that list?
Is it possible add scrollbar in android phonegap application?
please guide me
Thanks in advance
Mobile WebKit (iOS and Android, etc) does not provide a native way to scroll content inside a fixed width/height element, but many libraries can help you with that issue.
I use the iScroll to scroll the content in my PhoneGap app. It's a very lightweight framework, only focuses on the scroll problem of mobile WebKit browser or WebViews, and it works perfect.
Here is a simple example.
Is it possible to customize the linen background shown when you scroll past the end/top of the page in mobile safari via CSS/Javascript?
I know it can be done via Obj C, but Im not developing an application, Im developing a website in native mobile safari for the web.
Is it possible? If so how?
There is no way to customize this background.
The only workaround I can think of is to disable scrolling by preventDefault()-ing the various touch events on window and implement your own scrolling.
When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.
As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's browser?
Ideas? Thoughts? Thanks.
In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.
Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit
Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/
I'm not super familiar with iOS web app development, but iScroll looks promising.
This is just a simple CSS style:
.className{
position:fixed;
}
You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.
Here is that script you were talking about to make it work in mobile Safari:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch