0

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

freeeman
  • 203
  • 1
  • 11
  • this might be way off base, but what about making each 'page' it's own div, all of which are wrapped in a rectangular div that is pageWidth*numberOfPages wide...then have a couple functions: one that moves a given page immediately to the right of the currently viewed page, and one that does the same to the left...and then an animation loop that slides the master div right or left the width of the device? and, if you did have common elements, you could just have those be in a separate div that wasn't sliding (so your content would slide under the static pieces) – Robot Woods Jul 28 '11 at 17:24
  • What's wrong with the rendering of the fixed header in jQuery mobile? Is it animation speed or some positioning error? – Nicholas Evans Jul 28 '11 at 18:19
  • @RobotWoods thanks for your answer but I guess this would be problematic when your device goes for landscape view as you're giving some fixed in pixels width and not 100% for example though you might also check this programatically I guess.. – freeeman Jul 29 '11 at 08:03
  • @NicholasEvans well the fixed header+footer naturally on jQMobile will disappear when you are scrolling and reappear when page stops moving, though this is smoother when moving up as it will fade nicely but stay stick when you scroll down. That's the way jQm does (to keep 'native' scroll capability and not fake it with javascript I guess) When mixed with iScroll 4 (jQm being only for transitions so Im not using the fixed footer) from start, on iPhones it makes my iScroll-like footer(some bottom:0 div)appears like 40 px too down (i guess the safari toolbar height at bottom) so it is 90% hidden – freeeman Jul 29 '11 at 08:03

2 Answers2

1

You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
0

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.

Assaf Moldavsky
  • 1,681
  • 1
  • 19
  • 30