Can anybody recommend a plugin,css3 or javascript library which will allow me to implement the same page transition (scroll up&down) as the iphone app Feedly?
To be used in phonegap as html5 app.
jquery mobile didn't work will
I don't quite get what your asking for ?
As in the style of Titlebar and Tab Bar ? They can be achieved natively using Phonegap plugins - a google for that will find it pretty quick.
Otherwise for natural touch based slides between pages I recommend IOS Slider as it works well.
http://iosscripts.com/iosslider/
If this helped upvote or accept as the answer.
Related
How is scrolling implemented by PhoneGap? Is scrolling done by JavaScript plug-in like iScroll, is it done by a native scroll view, or in an other way?
The reason I ask, is because I am new to PhoneGap, and the biggest reason for chossing it is if it handles scrolling in a good way.
Since PhoneGap is a wrapper for deployment, not presentation, scrolling is dependent on the chrome from the browser on the platform you deploy to. If a device's native browser scrolling is an issue for you (like it sounds like it is on iOS), it will still be an issue in PhoneGap. Consider using a presentation library, like Sencha Touch, jQMobile or iScroll, to fix the issue on a specific deployment platform.
scrolling in phonegap wont ever come to the level of the native ones..
but iscroll brings it pretty close.
I'm looking to create a slider/scroller with javascript for the iPad. I created one using JQuery UI, but it's not supported on iPad.
I'm looking to create something simple, where the user can drag an image left and right along a track. I've looked all over the place for some simple insight on how to do that, all I find are tutorials or links to jquery plugins.
I'm not sure I can use the built-in slider from jquery-mobile, as I have specific images to use, and it doesn't look like it can be skinned.
Any help is welcome.
jQuery Tools Scrollable is iPad/touch friendly.
As an example, checkout the custom scrollable slider on trekk.com (works on iPad) that I built with jQuery Tools.
I recently used a plugin called Flexslider (http://flex.madebymufffin.com/) that supports swiping between images on iOS.
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.
I am looking for a simple way to use transitions you typically see in the native iPhone apps or Android native apps (such as the slider effect, ie. the whole page sliding to the left or the right).
I know those transistions between web pages on my web application are doable with the use of frameworks such as jQuery Mobile, Wink, iUi etc.
Also my application requires a fixed footer and a fixed header with scrollable content. I tried with jQuery Mobile but though the scrolling effect of the content is good, the rendering of the fixed header and footers are not that good.
So I use iScroll 4 instead but I cant use jQuery mobile to do only transistions as the jQuery mobile plays with the DOM etc. which causes some problems within the placement of the divs
Im giving a try with iUI but then again though it seems less 'wide' than jQ mobile, it still is a whole framework for web apps. But Im currently only looking for transitions..
Is there a way to achieve those "full web page" transisitons whitout the use of a javascript framework?
Also those framework such as iUI put all the pages inside one only( jQuery Mobile does not which is great ) separating them inside several divs.. this might be problematic with iScroll i guess?
The finest would be to be able to do those transitions between separate html pages, but I don't know if it's even possible ( I mean whitout the use of AJAX world techniques)
I only target modern devices using webkit (Android, iDevices..)
Thanks a lot for your help
You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.
forget iScroll for mobile applications. It works well but not for all webkit devices and you will have issues with a good chunk of Android devices. If you want something like a native app you need to go for a container model. A container model is basically having a header and a footer and a dynamic container in the middle. This is used by mobile sites like Twitter and Flikr. The dynamic container you can load either with an iframe or ajax (but personally I would stay away from iframes and mobile anything). Also before using any frameworks out there consider the benefits vs cost (size, future dependency and scalability, overhead parsing the JS... etc) because mobile is not desktop development and many developers seem to forget that fact. I currently work for a major social networking site and we have our own framework with is not a byte more then what we need. We used JQuery in the past but it turned out to be too much bloatwhere for the webkit devices we serve (size + parse time + dependency.. etc) and we ended up killing it.
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