Turn.js: The page flip effect in HTML5
PhoneGap From Scratch: Introduction
Want to learn how to use PhoneGap, but don't know where to get started? Join us as we put together "Sculder", not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you! In this series, we will build a mobile application using some of the features in PhoneGap. We will go from installation of the SDK to deployment into the app stores of the two major platforms: iOS and Android. Concepts covered in this series will include accessing the device camera, local storage, and geolocation. In this first part, we will take a quick look at what PhoneGap actually is and what you can use it for, and then look at the installation of the PhoneGap framework and the SDKs that we require for testing on OS X, Windows, and Linux environments. What is PhoneGap? By now you probably have a good idea of what PhoneGap is and you've probably even used it, but, if not, here's a brief overview. At the time of publication (e.g. Concluding Remarks
iScroll 5
iScroll 5 is a faster more mature code than the previous versions. It doesn’t add many new features but it fixes bugs and most notably runs smoother on old devices. Please note that previous releases are not maintained nor supported, so go get the new version! iScroll finally got its very own domain. iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. It works on desktop, mobile and smart TV. iScroll does not just scroll. Even on platforms where native scrolling is good enough, iScroll adds features that wouldn’t be possible otherwise. Granular control over the scroll position, even during momentum. The future We’ve gone so far… Can you believe all this started in 2008. The script has become much more than a simple scroller, but the original (current) structure is too tight to handle all the things I wish the iScroll would be capable of. Support development
Storage
When web developers think of storing anything about the user, they immediately think of uploading to the server. HTML5 changes that, as there are now several technologies allowing the app to save data on the client device. It might also be sync'd back to the server, or it might only ever stay on the client: that's down to you, the developer. There are several reasons to use client-side storage.
Flippy a jQuery flip effect plugin
Markup First, add Flippy JS in your page. Be sure to have jQuery too ! The Flippy content need to be included in a container, this prevents random perspective effects with CSS : Simply call flippy() function If you want to reverse last flip, just use reverse() function. Options color_target : The targeted background color. Callbacks You can attach function to specific events. Known issues The depth parameter has a strange effect when CSS rendering is used Cross browser ? The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…). Licence Released under the MIT license
Using the PhoneGap Build Panel in Dreamweaver CS6 to Build Native Applications for Android and iOS Devices | CS6 & Creative Cloud Feature Tour for Web
Community Translation Episode available in 1 languages Available Translations: Join the Community Translation Project Thanks for your interest in translating this episode! Please Confirm Your Interest Thanks for your interest in adding translations to this episode! An error occurred while processing your request. Another translator has already started to translate this episode. Thanks for Participating! This episode has been assigned to you and you can expect an e-mail shortly containing all the information you need to get started. About This Episode Adobe Evangelist Greg Rewis shows how to build native applications for Android and iOS devices using Dreamweaver CS6.
Implementing a Fixed Position iOS Web Application - Mobile
Ryan FioravantiDecember 2010 Background Here at Google, we're constantly pushing the boundaries of what's possible in a mobile web application. Technologies like HTML5 allow us to blur the distinction between web apps and native apps on mobile devices. As part of that effort we've developed a fixed position version of our mobile Gmail application. The mechanisms being used here are similar to the ones used to implement our two pane UI for Gmail on the iPad. In a desktop web application, this would be a simple feat because desktop browsers support position: fixed. In this article, we will show you the building blocks required to incorporate fixed position into your own mobile web applications. Creating a suitable layout Animating the scrollable content on drag using transforms Animating the scrollable content with momentum using transitions Halting a scrolling element on touch, mid-transitions Creating a Suitable Layout Animating the scrollable content This function gives us momentum!
Teehan+Lax - Defining Experience
Tools iPhone 6 GUI Template (iOS 8) Our template is available in two formats iPhone GUI Template (iOS 7) iPad GUI Template (iOS 7) Older Tools
fixed position
Simple YouTube Menu Effect
A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath. View demo Download source Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). So, let’s do it! The Markup For the HTML we will use a nav element and inside we’ll add a div that will contain the menu icon and the label. Each menu item will have a little icon, so we’ll give them all different classes for that. Let’s take a look at the CSS. The CSS Note that the CSS will not contain any vendor prefixes, but you will find them in the files. First, we will include our icon font: The main nav container will have some general styles, like font size, line-height, color and the dimensions. The division that contains the menu icon span and the label link will be positioned absolutely and we’ll set the cursor to “pointer”.
iOS Pull-to-refresh in mobile Safari with native Scrolling - Damien Antipa
The iOS6 developer kit for native apps is out there for a while and Apple finally added a out of the box pull-to-refresh control called UIRefreshControl. However this feature is nothing new and used by plenty of apps in different implementations for years now. There is even a implementation for web applications included into iScroll which allows to simply make a block element scrollable and add the pull-to-refresh feature. I strongly recommend the use of this attribute instead of Javascript scrolling! The concept to achieve that is pretty simple. The outer div (red border) is scrollable and gets the -webkit-overflow-scrolling: touch; and attribute overflow-y: auto;. The background color between the pull-to-refresh panel and the content may be different and can be applied to the nested divs. Now you should already be able to see the pull-to-refresh panel behind the content while scrolling with the rubber band.
