<pedrocorreia.net ⁄>
 

<Introduction to iScroll ⁄ >




clicks: 2926 2926 2011-10-20 2011-10-20 goto programacao myNews programacao  Bookmark This Bookmark This


In this tutorial I will teach you how to use iScroll 4 to create a simple mobile web site. The site we create will have a fixed header and a fixed footer with content that can be easily scrolled in-between. As we'll see, achieving this effect on both Android and iOS isn't as easy as you might think!

Web based apps are a great place for front end developers to begin their journey into the world of building mobile applications. Using your existing knowledge of HTML, CSS, and Javascript, you can build apps that look-and-feel very close to those made with a native platform SDK. Even better, your applications will be cross-platform compatible and will work on any mobile device with a modern browser.

Of course, there are some caveats to developing for mobile browsers. Some may be obvious, such as inability to tap into the device camera (at least for now). Others might not be as obvious, like the sheer number of mobile browsers that are already in use (the variety is mind boggling).

While there are plenty of frameworks (e.g. jQuery Mobile, SenchaTouch, etc.) that can help get you started with mobile web apps, for now I'm not going to use any of them. Instead, I'm going to focus on pure JavaScript with one handy library: iScroll 4.

iScroll solves a problem in the mobile WebKit based browsers found on both Android and iOS. Both of these browsers offer no support for absolutely positioned header and footer content with scrolling content placed in-between by default. The entire HTML document is scrolled regardless of any CSS you might have in place to achieve otherwise. Because many native mobile applications are designed with a fixed navigation bar at the top of the screen and a fixed toolbar or tab bar at the bottom of the screen, this lack of fixed content support in the WebKit browsers is really quite a problem. Not to worry: in this tutorial, I'm going to show you how to achieve this layout with iScroll.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://mobile.tutsplus.com/tutorials/mobile-web-apps/introduction-to-i...




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 14985 14985 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 14733 14733 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 14435 14435 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 14990 14990 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 25377 25377 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 14207 14207 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 14908 14908 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


15 Handpicked jQuery Drop Down Menus Tutorials new ...

Here we are presenting another brilliant collection of 15 jQuery navigation menu that you can downlo (...)

clicks: 14004 14004 2012-05-10 2012-05-10 goto url (new window) smashingapps.co... goto myNews programacao