Book Image

HTML5 Mobile Development Cookbook

By : Shi Chuan
Book Image

HTML5 Mobile Development Cookbook

By: Shi Chuan

Overview of this book

<p>How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question. This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a range of mobile devices. <br /><br />HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.<br /><br />Build a rock-solid default mobile HTML template and understand mobile user interaction. Make your site fast and responsive, leveraging the uniqueness of location-based mobile features and mobile rich media. Make your mobile website perfect using debugging, performance optimization and server-side tuning. The book finishes with a sneak preview of future mobile web technologies.</p>
Table of Contents (16 chapters)
HTML5 Mobile Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Making a carousel with swipe events


One of the common features of mobile devices is swiping. When you browse photos in your photo gallery, you swipe left and right to navigate from one picture to another. On Android devices, you swipe down to unlock the phone. On a mobile browser, you can use swipe as well.

Getting ready

First, let's create an HTML document and name it ch03r04.html.

How to do it...

  1. 1. Enter the following code:

    <!doctype html>
    <html>
    <head>
    <title>Mobile Cookbook</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    html, body {
    padding:0;
    margin:10px auto;
    }
    #checkbox {
    border:5px solid #ccc;
    width:30px;
    height:30px;
    }
    #wrapper {
    width:210px;
    height:100px;
    position:relative;
    overflow:hidden;
    margin:0 auto;
    }
    #inner {
    position:absolute;
    width:630px;
    }
    #inner div {
    width:200px;
    height:100px;
    margin:0 5px;
    background:#ccc;
    float:left;
    }
    .full-circle {
    background-color: #ccc...