├── .gitignore ├── LICENCE.md ├── README.md ├── appendixC ├── .htaccess ├── ajax.js ├── app.js ├── bird_data.js ├── birddata.php ├── birdlist.txt ├── birds.json ├── combo.php ├── handlebars.js ├── index.html ├── listingC.01.js ├── listingC.02.js ├── listingC.03.js ├── listingC.04.html ├── listingC.05.css ├── listingC.06.css ├── listingC.07.js ├── model.js ├── quiz.html ├── router.js ├── styles.css └── view.js ├── chapter02 ├── birds.css ├── birds.html ├── phone.css ├── reset.css └── tablet.css ├── chapter03 ├── bird_cropped.jpg ├── bird_cropped_retina.jpg ├── birds.css ├── birds.html ├── birds_fast.html ├── birds_inlinecss.html ├── birds_responsive.html ├── birds_slow.html ├── combo.css ├── gull-1280x400.psd ├── gull-360x112.jpg ├── gull-640x360.jpg ├── gull-720x225.jpg ├── gull-754x424.psd ├── jquery-1.8.0.min.js ├── phone.css ├── reset.css └── tablet.css ├── chapter04 ├── bird_data.js ├── birds.appcache ├── birds_cache.html ├── birds_random.html ├── code_block_1.js ├── code_block_2.js ├── code_block_3.js ├── code_block_4.appcache ├── code_block_5.js ├── flickr_api.js ├── gull-360x112.jpg ├── gull-640x360.jpg ├── gull-720x225.jpg ├── imagefetcher.js ├── jquery-1.8.0.min.js ├── listing4.1.js ├── listing4.2.js ├── listing4.3.html └── listing4.4.js ├── chapter05 ├── ajax.js ├── bird_data.js ├── bird_template.html ├── birds_wrapper.html ├── birds_wrapper_min.html ├── birds_wrapper_tmpl.html ├── california_condor.html ├── california_condor_frag.html ├── california_gull.html ├── california_gull.json ├── california_gull_frag.html ├── california_quail.html ├── california_quail.json ├── california_quail_frag.html ├── flickr_api.js ├── history.html ├── image_credits.txt ├── imagefetcher.js ├── listing5.1.html ├── listing5.10.js ├── listing5.11.js ├── listing5.12.html ├── listing5.13.js ├── listing5.14.json ├── listing5.15.js ├── listing5.16.js ├── listing5.2.html ├── listing5.3.js ├── listing5.4.js ├── listing5.5.js ├── listing5.6.js ├── listing5.7.js ├── listing5.8.js ├── listing5.9.js ├── pjax.js ├── pjax_superfast.js ├── rollup.js ├── rollup_min.js ├── router.js ├── styles.css └── template_engine.js ├── chapter06 ├── facade.html ├── facade.js ├── index.html ├── listing6-1.js ├── listing6-2.html ├── listing6-3.js ├── listing6-4.js ├── listing6-5.js └── tap.html ├── chapter07 ├── bounce.html ├── bounce_slow.html ├── bounce_translate.html ├── bounce_with_background.html ├── caching.html ├── config.rb ├── facade.js ├── index.html ├── lab.php ├── listing7.1.js ├── listing7.10.css ├── listing7.11.js ├── listing7.12.js ├── listing7.13.css ├── listing7.14.css ├── listing7.15.html ├── listing7.16.html ├── listing7.2.html ├── listing7.3.css ├── listing7.4.js ├── listing7.5.html ├── listing7.6.css ├── listing7.7.js ├── listing7.8.css ├── listing7.9.css ├── requestFrame.html ├── scrubs.html ├── stylesheets │ ├── bounce.css │ ├── bounce2.css │ ├── bounce_transforms.css │ ├── ie.css │ ├── print.css │ ├── screen.css │ └── throb.css ├── throb.html ├── thumbs │ ├── thumb-01.jpg │ ├── thumb-02.jpg │ ├── thumb-03.jpg │ ├── thumb-04.jpg │ ├── thumb-05.jpg │ ├── thumb-06.jpg │ ├── thumb-07.jpg │ ├── thumb-08.jpg │ ├── thumb-09.jpg │ └── thumb-10.jpg └── transforms_demo.html ├── chapter08 ├── .sass-cache │ ├── 24fa9a973df0ff418873cc7bb75bddf3f37f3338 │ │ ├── _bullets.scssc │ │ ├── _horizontal-list.scssc │ │ ├── _inline-block-list.scssc │ │ └── _inline-list.scssc │ ├── 395cb21f55298db091188a19f499f3c4cbfc3040 │ │ ├── _hover-link.scssc │ │ ├── _link-colors.scssc │ │ └── _unstyled-link.scssc │ ├── 46d39b17b64163c558ebdc1cca25eec5f3b567f3 │ │ ├── _ellipsis.scssc │ │ ├── _force-wrap.scssc │ │ ├── _nowrap.scssc │ │ └── _replacement.scssc │ ├── 47bc3e79e5cf428e640b160a6ff691ab3903ebe8 │ │ ├── _css3.scssc │ │ ├── _reset.scssc │ │ ├── _support.scssc │ │ ├── _typography.scssc │ │ └── _utilities.scssc │ ├── 572270916d8a1755bd582053c81723fd195c3ee2 │ │ └── _contrast.scssc │ ├── 5a9213a7499eac53953b1dc09cb7cfa58d51c527 │ │ ├── _clearfix.scssc │ │ ├── _float.scssc │ │ ├── _hacks.scssc │ │ ├── _min.scssc │ │ ├── _reset.scssc │ │ └── _tag-cloud.scssc │ ├── 5f7662065dcce1410165ddfe955efc9b7dc33769 │ │ ├── _color.scssc │ │ ├── _general.scssc │ │ ├── _sprites.scssc │ │ └── _tables.scssc │ ├── 75640fff35f57825ee18f946c95ef10ad0cf8fc0 │ │ ├── _appearance.scssc │ │ ├── _background-clip.scssc │ │ ├── _background-origin.scssc │ │ ├── _background-size.scssc │ │ ├── _border-radius.scssc │ │ ├── _box-shadow.scssc │ │ ├── _box-sizing.scssc │ │ ├── _box.scssc │ │ ├── _columns.scssc │ │ ├── _filter.scssc │ │ ├── _font-face.scssc │ │ ├── _hyphenation.scssc │ │ ├── _images.scssc │ │ ├── _inline-block.scssc │ │ ├── _opacity.scssc │ │ ├── _regions.scssc │ │ ├── _shared.scssc │ │ ├── _text-shadow.scssc │ │ ├── _transform.scssc │ │ └── _transition.scssc │ ├── 7815a0ffb5af7fafa57710a179c4a353515a2ae5 │ │ ├── _links.scssc │ │ ├── _lists.scssc │ │ ├── _text.scssc │ │ └── _vertical_rhythm.scssc │ ├── 8fb43f757b1fd98d88d0d2b0103d19da8f42b4c6 │ │ └── _grid-background.scssc │ ├── 928717f716b7357483cd89c938a244e1fd7e2fc7 │ │ └── _utilities.scssc │ ├── a7ec7a7db804842bd64445eb991a428ff1a3e19c │ │ ├── _base.scssc │ │ └── _sprite-img.scssc │ ├── b6b03e728b28a0d9b80382be9da8829de08f1889 │ │ └── _compass.scssc │ ├── d989e49895103167c5b936a0ff535c487c5ee048 │ │ ├── _alternating-rows-and-columns.scssc │ │ ├── _borders.scssc │ │ └── _scaffolding.scssc │ └── da93cce2e5ae8a022c86896a617a8dfd940d774f │ │ ├── ie.scssc │ │ ├── print.scssc │ │ └── screen.scssc ├── anim.html ├── bird_data.js ├── empty.gif ├── handlebars.js ├── index.html ├── infinite_scroll.html ├── infinite_scroll_o.html ├── listing8.1.js ├── listing8.10.js ├── listing8.11.js ├── listing8.12.js ├── listing8.2.js ├── listing8.3.html ├── listing8.4.css ├── listing8.5.js ├── listing8.6.js ├── listing8.7.js ├── listing8.8.js ├── listing8.9.js ├── magicCache.html ├── scroller.js ├── scroller_o.js ├── stylesheets │ ├── ie.css │ ├── print.css │ └── screen.css └── testscroll.html ├── chapter09 ├── basicForm.htm ├── lightbox │ ├── birdlist.txt │ ├── data.json │ ├── reset.css │ ├── slides.css │ ├── slides.html │ ├── slides.js │ └── test.html ├── listing9.1.html ├── listing9.10.js ├── listing9.11.js ├── listing9.12.js ├── listing9.13.js ├── listing9.14.js ├── listing9.15.js ├── listing9.16.js ├── listing9.17.js ├── listing9.18.js ├── listing9.19.js ├── listing9.2.css ├── listing9.20.js ├── listing9.3.js ├── listing9.4.js ├── listing9.5.js ├── listing9.6.js ├── listing9.7.html ├── listing9.8.css ├── listing9.9.js ├── simpleswipe.html └── styles.css ├── chapter10 ├── divscroll.html ├── iscroll.html ├── iscroll.js ├── listing10.01.js ├── listing10.02.css ├── listing10.03.html ├── listing10.04.html ├── listing10.05.css ├── listing10.07.js ├── listing10.08.js ├── listing10.09.js ├── listing10.10.js ├── listing10.11.js ├── listing10.12.js ├── listing10.13.js ├── listing10.13a.js ├── listing10.14.js ├── listing10.15.js ├── listing10.16.js ├── listing10.6.js ├── ms.html ├── overthrow.js ├── quail.jpg └── scroll.html └── chapter11 ├── README.md ├── index.html ├── listing11.1.html ├── listing11.10.html ├── listing11.11.css ├── listing11.12.js ├── listing11.13.js ├── listing11.14.js ├── listing11.15.js ├── listing11.16.js ├── listing11.17.js ├── listing11.2.js ├── listing11.3.js ├── listing11.4.js ├── listing11.5.js ├── listing11.6.js ├── listing11.7.js ├── listing11.8.js ├── listing11.9.js ├── touchdetector.html └── touchpoints.js /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Building Touch Interfaces with HTML5 2 | ==================================== 3 | Code Listings 4 | ------------- 5 | 6 | This Repo contains the code listings for the book [Building Touch Interfaces with HTML5](http://www.peachpit.com/store/building-touch-interfaces-with-html5-develop-and-design-9780321887658) by [Stephen Woods](http://stephenwoods.net). 7 | 8 | If you find problems or bugs in the samples please submit a pull request or [create an issue](https://github.com/saw/touch-interfaces/issues/new) and I will endevour to respond as quickly as possible. For errors in the book feel free to open issues here as well. Errata will be published on touch-interfaces.com 9 | 10 | -------------------------------------------------------------------------------- /appendixC/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | RewriteRule ^(.*)\.html$ index.html [L] -------------------------------------------------------------------------------- /appendixC/ajax.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | 4 | function makeRequest(url, callback, scope) { 5 | 6 | var xhr = new XMLHttpRequest(); 7 | var cb = callback, sc = scope; 8 | xhr.open('get', url, true); 9 | 10 | xhr.onreadystatechange = function() { 11 | if (this.readyState == 4 ) { 12 | cb.apply(sc, [this]); 13 | } 14 | } 15 | xhr.send(); 16 | } 17 | 18 | 19 | window.ajax = { 20 | makeRequest:makeRequest 21 | } 22 | 23 | })(); -------------------------------------------------------------------------------- /appendixC/birddata.php: -------------------------------------------------------------------------------- 1 | $items[1], 13 | 'name' => $items[0], 14 | 'id' => uniqid('b-') 15 | ); 16 | $out[] = $thisItem; 17 | } 18 | $outStr = json_encode($out); 19 | header('Content-type: application/json'); 20 | file_put_contents('birds.json', $outStr); 21 | echo $outStr; 22 | 23 | -------------------------------------------------------------------------------- /appendixC/combo.php: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-family: helvetica; 4 | color: #ccc; 5 | } 6 | 7 | #right { 8 | color: black; 9 | font-weight: bold; 10 | } 11 | 12 | #wrong { 13 | color: red; 14 | text-decoration: line-through; 15 | } 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /appendixC/router.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var routes = []; 4 | 5 | //this will push the new route onto the 6 | //list of routes. 7 | function addRoute(route, callback, scope){ 8 | 9 | //create a consistent signature that 10 | //we can rely on later 11 | var routeObj = { 12 | route: route, 13 | callback: callback, 14 | scope: scope 15 | }; 16 | 17 | routes.push(routeObj); 18 | } 19 | 20 | //looks for matching routes, then calls the callback 21 | function handleRoute(path, noHistory) { 22 | 23 | var len = routes.length, scope; 24 | 25 | for (var i=0; i < len; i++) { 26 | if(path.match(routes[i].route)) { 27 | 28 | //if the caller provided a scope, 29 | //we use it, otherwise we will execute 30 | //the callback in the window scope 31 | if(routes[i].scope) { 32 | scope = routes[i].scope; 33 | } else { 34 | scope = window; 35 | } 36 | 37 | // if this is from a popstate, 38 | // we shouldn't push state again 39 | if(!noHistory) { 40 | history.pushState({}, null, path); 41 | } 42 | 43 | //push the path onto the history stack 44 | routes[i].callback.apply(scope, [path]); 45 | return true; 46 | } 47 | } 48 | //no route found, move on 49 | return false; 50 | } 51 | 52 | window.addEventListener('popstate', function(e) { 53 | 54 | handleRoute(window.location.pathname, true); 55 | }); 56 | 57 | window.router = { 58 | handleRoute:handleRoute, 59 | addRoute: addRoute 60 | }; 61 | 62 | })(); -------------------------------------------------------------------------------- /chapter02/birds.css: -------------------------------------------------------------------------------- 1 | html { 2 | background: #fff; 3 | color: #000; 4 | } 5 | 6 | a { 7 | color: green; 8 | text-decoration: none; 9 | } 10 | 11 | p { 12 | margin-bottom: 10px; 13 | } 14 | 15 | h2 { 16 | font-size: 20px; 17 | margin: 4px; 18 | } 19 | 20 | i { 21 | font-style: italic; 22 | } 23 | 24 | .container { 25 | padding: 0 50px; 26 | } 27 | 28 | .bd { 29 | font-family: Helvetica, “Helvetica Neue”, Arial, sans-serif ; 30 | } 31 | 32 | .hero-img { 33 | max-width: 100%; 34 | } 35 | 36 | .nav-li { 37 | display: inline-block; 38 | background: #5e49ff; 39 | border: 3px solid #8a7bfd; 40 | width: 120px; 41 | margin-bottom: 10px; 42 | } 43 | 44 | .nav-li .nav-link { 45 | color: #fff; 46 | padding: 4px; 47 | } 48 | 49 | .header { 50 | width: 100%; 51 | height: 60px; 52 | background: #000; 53 | padding: 0; 54 | font-size: 38px; 55 | font-weight: bold; 56 | 57 | } 58 | 59 | .header .title{ 60 | color: #fff; 61 | padding: 10px; 62 | text-align: left; 63 | } 64 | 65 | .hero-shot { 66 | width: 50%; 67 | float:left; 68 | margin-right: 10px; 69 | } 70 | 71 | .sidebar { 72 | position: absolute; 73 | padding: 10px; 74 | top: 60px; 75 | width: 150px; 76 | } 77 | 78 | .main { 79 | 80 | margin: 10px 10px 10px 150px; 81 | 82 | } 83 | 84 | .footer { 85 | width: 100%; 86 | } 87 | -------------------------------------------------------------------------------- /chapter02/phone.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0; 3 | } 4 | 5 | .main { 6 | margin: 0; 7 | } 8 | 9 | .content { 10 | margin: 10px 10px; 11 | } 12 | 13 | .nav-li { 14 | font-size: 12px; 15 | } 16 | 17 | .hero-shot { 18 | float: none; 19 | width: 100%; 20 | height: 100px; 21 | overflow: hidden; 22 | position: relative; 23 | } 24 | 25 | .header .title { 26 | font-size: 24px; 27 | text-align: left; 28 | } 29 | 30 | .hero-shot .caption { 31 | position: absolute; 32 | bottom: 5px; 33 | margin: 0; 34 | 35 | } 36 | 37 | .hero-shot .caption, .hero-shot .caption a { 38 | color: #000; 39 | color: rgba(255,255,255,0.5); 40 | } 41 | -------------------------------------------------------------------------------- /chapter02/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /chapter02/tablet.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 10px; 3 | } 4 | 5 | .nav-li { 6 | width: auto; /* so all the text fits */ 7 | } 8 | 9 | .sidebar { 10 | position:relative; /* back in the flow */ 11 | top: 0; 12 | width: auto; 13 | padding: 0; 14 | text-align: center; 15 | } 16 | 17 | .header .title { 18 | text-align: center; 19 | } 20 | 21 | .main { 22 | margin: 0; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /chapter03/bird_cropped.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saw/touch-interfaces/1ea167225cb779ddfecae281abbff628f1c71f0c/chapter03/bird_cropped.jpg -------------------------------------------------------------------------------- /chapter03/bird_cropped_retina.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saw/touch-interfaces/1ea167225cb779ddfecae281abbff628f1c71f0c/chapter03/bird_cropped_retina.jpg -------------------------------------------------------------------------------- /chapter03/birds.css: -------------------------------------------------------------------------------- 1 | html { 2 | background: #fff; 3 | color: #000; 4 | } 5 | 6 | a { 7 | color: green; 8 | text-decoration: none; 9 | } 10 | 11 | p { 12 | margin-bottom: 10px; 13 | } 14 | 15 | h2 { 16 | font-size: 20px; 17 | margin: 4px; 18 | } 19 | 20 | i { 21 | font-style: italic; 22 | } 23 | 24 | .container { 25 | padding: 0 50px; 26 | } 27 | 28 | .bd { 29 | font-family: Helvetica, “Helvetica Neue”, Arial, sans-serif ; 30 | } 31 | 32 | .hero-shot { 33 | width: 50%; 34 | float:left; 35 | margin-right: 10px; 36 | } 37 | 38 | .hero-img { 39 | max-width: 100%; 40 | } 41 | 42 | .nav-li { 43 | display: inline-block; 44 | background: #5e49ff; 45 | border: 3px solid #8a7bfd; 46 | width: 120px; 47 | margin-bottom: 10px; 48 | } 49 | 50 | .nav-li .nav-link { 51 | color: #fff; 52 | padding: 4px; 53 | } 54 | 55 | .header { 56 | width: 100%; 57 | height: 60px; 58 | background: #000; 59 | padding: 0; 60 | font-size: 38px; 61 | font-weight: bold; 62 | 63 | } 64 | 65 | .header h1{ 66 | color: #fff; 67 | padding: 10px; 68 | text-align: left; 69 | } 70 | 71 | 72 | .sidebar { 73 | position: absolute; 74 | padding: 10px; 75 | top: 60px; 76 | width: 150px; 77 | } 78 | 79 | .main { 80 | 81 | margin: 10px 10px 10px 150px; 82 | 83 | } 84 | 85 | .footer { 86 | width: 100%; 87 | } 88 | -------------------------------------------------------------------------------- /chapter03/birds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Birds of California 8 | 9 | 10 | 11 | 12 |
13 |

Birds of California!

14 |
15 | 16 | 25 | 26 |
27 |

California Gull

28 |
29 | 30 |

Photo By C.L. Maclay

31 |
32 |
33 |

The California Gull (Larus californicus) is a gull native to the western United States. The gull looks a bit like the Herring Gull. distinguishing characteristics include a black ring on a yellow bill, yellow legs and a rounder head.

34 |

Adults have gray and white bodies with black primary feathers. Juveniles have brown plumage.

35 |

The California Gull is very common in the San Francisco Bay area. The bay isn't their historic habitat--that is the salty Mono Lake on the Nevada border. Their abundance in the bay area is attributed to their breeding in the salt pond of the south bay, and abundant food from bay area landfills

36 |
37 | 38 |
39 | 40 |