* First commit

joehewitt · May 20, 2011 · 633c125 · 633c125
commit 633c125
Show file tree

Hide file tree

Showing 5 changed files with 676 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2011 Joe Hewitt
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+scrollability
+=============
+
+Give your mobile web apps a pretty darn good approximation of native scrolling.
+
+Scrollability is a single script, it's small, and it has no external dependencies. Drop it into your page, add a few CSS classes to scrollable elements, and scroll away. 
+
+Status
+------
+
+This project is a WORK-IN-PROGRESS and is not yet ready to use.  Stay tuned!  Documentation will be written when the library is ready.
+
+Plan
+----
+
+As of this writing, Scrollability supports only basic vertical or horizontal scrolling.  Future plans include:
+
+* Snapping to pages
+* Sticky table headers
+* Photo browser
+* More customization of the animation details
+
+License 
+-------
+
+Copyright 2011 Joe Hewitt
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/examples/example1.html b/examples/example1.html
@@ -0,0 +1,151 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+<title>Scrollability</title>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,maximum-scale=1.0" />
+<style type="text/css">
+
+html {
+    overflow: hidden;
+    background: #333;
+    font-family: Helvetica;
+}
+
+#container {
+    position: absolute;
+    left: 0;
+    top: 30px;
+    bottom: 0;
+    width: 320px;
+    background: #fff;
+    overflow: hidden;
+}
+
+#page {
+    -webkit-transform: translate3d(0,0,0);
+}
+
+.item {
+    position: relative;
+    top: -1px;
+    border-top: 1px solid #ccc;
+    padding: 8px 12px;
+    font: 21px Helvetica;
+    font-weight: bold;
+    background: #fff;
+}
+
+.item:last-child {
+    border-bottom: 1px solid #ccc;
+}
+
+.bar {
+    position: absolute;
+    background: #222;
+    left: 0;
+    top: 0;
+    width: 100%;
+    color: #fff;
+    padding: 7px 0;
+    text-align: center;
+    font-size: 12px;
+    font-weight: bold;
+    border-bottom: 1px solid #000;
+}
+
+.item.touched {
+    color: #fff;
+    background: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        color-stop(0, #028AF3),
+        color-stop(1, #005DE6)
+    );
+}
+
+</style>
+
+<script type="text/javascript" src="../scrollability-min.js"></script>
+
+<script language="javascript">
+
+var names = [
+"Arnulfo Heriberto Hao",
+"Elbert Murray Heartsill",
+"Danny Fred Querido",
+"Boris Hobert Cregger",
+"Clifton Brady Laurance",
+"Homer Jay Telch",
+"Lawrence Lloyd Barrus",
+"Shannon Isaias Plate",
+"Odis Raul Insley",
+"Marion Ben Nhatsavang",
+"Dong Brent Mcwilson",
+"Chong Jarrod Hinderman",
+"Eric Reyes Caffie",
+"Junior Newton Dagan",
+"Cleo Maynard Gutirrez",
+"Cruz Rey Misiewicz",
+"Jeremy Nelson Bew",
+"Doug Buster Maclead",
+"Zachariah Martin Colo",
+"Nathaniel Houston Berneri",
+"Clement Laverne Vrana",
+"Kermit Jeffery Left",
+"Davis Margarito Koran",
+"Booker Wallace Primavera",
+"Prince Enrique Pulice",
+"Johnathon Minh Inciong",
+"Stan Tony Calaycay",
+"Owen Sang Tugade",
+"Charlie Melvin Veloso",
+"August Galen Kathel",
+"Dominique Marc Sitterson",
+"Mitchell Isaiah Chareunrath",
+"Luther Avery Fekety",
+"Myles Doug Strohl",
+"Reuben Bob Holoman",
+"Eloy Erwin Kendrick",
+"Alec Bernard Hitz",
+"Jessie Oswaldo Shamir",
+"Jamison Seymour Nighman",
+"Garret Chester Robasciotti",
+"Clifford Samuel Sokoloff",
+"Carlton Jamel Mcentee",
+"Blair Titus Lennertz",
+"Barton Edmund Payn",
+"Ed Williams Faltin",
+"Leonardo Kent Trimarchi",
+"Lon Esteban Samrah",
+"Mike Alfonzo Alaniz",
+"George Gil Domnick",
+"Lemuel Lesley Cerventez",
+];
+
+addEventListener('DOMContentLoaded', function() {
+    var container = document.getElementById('container');
+    var page = document.getElementById('page');
+    for (var i = 0; i < names.length*5; ++i) {
+        var item = document.createElement('div');
+        item.className = 'item';
+        item.innerHTML = names[i%names.length];
+        page.appendChild(item);
+        if (page.offsetHeight > container.offsetHeight*8) {
+            break;
+        }
+    }
+});
+
+</script>
+
+</head>
+<body>
+    <div class="bar top">Scrollability Demo</div>
+    <div id="container">
+        <div id="page" class="scrollable vertical"></div>
+    </div>
+</body>
+</html>
diff --git a/scrollability-min.js b/scrollability-min.js