v4.1

krisselden · Jun 8, 2011 · 995fafb · 995fafb
1 parent 0398d2a
commit 995fafb
Show file tree

Hide file tree

Showing 20 changed files with 917 additions and 1,107 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-iScroll v4.0 Beta 4
+iScroll v4.1
 ======================
 
 The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. Read more at [cubiq.org](http://cubiq.org).
@@ -16,5 +16,7 @@ In completely random order:
 - [Shimon Dookdin](https://github.com/shimondoodkin) for help with wheel support
 - [Will Bailey](http://blog.thirtymontgomery.com/) for commonJS compatibility
 - [Aaron Infidel](https://github.com/aaroninfidel) for bug reports and continued support
+- [David Haslem](https://github.com/therabidbanana) for suggestions and bug reports
+- [gingertom](https://github.com/gingertom) for suggestions and bug reports
 - All those who supported, linked, loved the iScroll
 - I'm sure I'm missing someone, sorry about that. If you helped in the script development and you don't see your name here, please drop me a line
diff --git a/bin/make-dist b/bin/make-dist
@@ -1,4 +1,4 @@
 #!/bin/sh
 
-java -jar /usr/local/bin/yuicompressor-2.4.2.jar -v --charset utf-8 ../src/iscroll.js -o ../dist/iscroll-min.js
-java -jar /usr/local/bin/yuicompressor-2.4.2.jar -v --charset utf-8 ../src/iscroll-lite.js -o ../dist/iscroll-lite-min.js
+java -jar /usr/local/bin/yuicompressor-2.4.6.jar -v --charset utf-8 ../src/iscroll.js -o ../dist/iscroll-min.js
+java -jar /usr/local/bin/yuicompressor-2.4.6.jar -v --charset utf-8 ../src/iscroll-lite.js -o ../dist/iscroll-lite-min.js
diff --git a/dist/iscroll-lite-min.js b/dist/iscroll-lite-min.js
diff --git a/dist/iscroll-min.js b/dist/iscroll-min.js
diff --git a/examples/carousel/index.html b/examples/carousel/index.html
@@ -7,7 +7,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>iScroll demo: Carousel</title>
 
-<script type="text/javascript" src="../../src/iscroll.js?v4"></script>
+<script type="text/javascript" src="../../src/iscroll.js"></script>
 
 <script type="text/javascript">
 var myScroll;
@@ -40,24 +40,6 @@
 	font-family:helvetica;
 }
 
-#header {
-	width:100%;
-	height:45px;
-	line-height:45px;
-	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
-	padding:0;
-	color:#eee;
-	font-size:20px;
-	text-align:center;
-}
-
-#header a {
-	color:#f3f3f3;
-	text-decoration:none;
-	font-weight:bold;
-	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
-}
-
 #wrapper {
 	width:300px;
 	height:160px;
@@ -69,6 +51,9 @@
 
 	background:#aaa;
 	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	-o-border-radius:10px;
+	border-radius:10px;
 	background:#e3e3e3;
 }
 
@@ -92,6 +77,9 @@
 
 #scroller li {
 	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	-o-box-sizing:border-box;
+	box-sizing:border-box;
 	display:block; float:left;
 	width:300px; height:160px;
 	text-align:center;
@@ -133,6 +121,9 @@
 	text-indent:-9999em;
 	width:8px; height:8px;
 	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	-o-border-radius:4px;
+	border-radius:4px;
 	background:#ddd;
 	overflow:hidden;
 	margin-right:4px;

diff --git a/examples/custom-scrollbar/index.html b/examples/custom-scrollbar/index.html
@@ -44,7 +44,10 @@
 	width:100%;
 	height:45px;
 	line-height:45px;
+	background-color:#d51875;
 	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
+	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
+	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 	padding:0;
 	color:#eee;
 	font-size:20px;
@@ -63,7 +66,10 @@
 	bottom:0; left:0;
 	width:100%;
 	height:48px;
-	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));;
+	background-color:#222;
+	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
+	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
+	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
 	padding:0;
 	border-top:1px solid #444;
 }

diff --git a/examples/custom-scrollbar/scrollbar.css b/examples/custom-scrollbar/scrollbar.css
@@ -19,12 +19,30 @@
 	height:100%;
 
 	/* The following is probably what you want to customize */
-	background:-webkit-gradient(linear, 0 0, 100% 0, from(#a00), to(#f00));
+	background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#a00), to(#f00));
+	background-image:-moz-linear-gradient(top, #f00, #900);
+	background-image:-o-linear-gradient(top, #f00, #900);
+
 	border:1px solid #900;
 	-webkit-background-clip:padding-box;
+	-moz-background-clip:padding-box;
+	-o-background-clip:padding-box;
+	background-clip:padding-box;
+
 	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	-o-box-sizing:border-box;
+	box-sizing:border-box;
+
 	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	-o-border-radius:4px;
+	border-radius:4px;
+
 	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
 }
 
 
@@ -46,9 +64,28 @@
 
 	/* The following is probably what you want to customize */
 	background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
-	border:1px solid #800;
+	background-image:-moz-linear-gradient(top, #f00, #900);
+	background-image:-o-linear-gradient(top, #f00, #900);
+
+	border:1px solid #900;
+
 	-webkit-background-clip:padding-box;
+	-moz-background-clip:padding-box;
+	-o-background-clip:padding-box;
+	background-clip:padding-box;
+
 	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	-o-box-sizing:border-box;
+	box-sizing:border-box;
+
 	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	-o-border-radius:4px;
+	border-radius:4px;
+
 	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
+	box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
 }
diff --git a/examples/horizontal-scroll/index.html b/examples/horizontal-scroll/index.html
@@ -7,7 +7,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>iScroll demo: horizontal scroll</title>
 
-<script type="application/javascript" src="../../src/iscroll.js?v4"></script>
+<script type="application/javascript" src="../../src/iscroll.js"></script>
 
 <script type="text/javascript">
 
@@ -45,6 +45,8 @@
 	height:45px;
 	line-height:45px;
 	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
+	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
+	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 	padding:0;
 	color:#eee;
 	font-size:20px;

diff --git a/examples/ios-perfect-scrollbar/index.html b/examples/ios-perfect-scrollbar/index.html
@@ -9,7 +9,7 @@
 
 <link rel="stylesheet" type="text/css" href="scrollbar.css">
 
-<script type="application/javascript" src="../../src/iscroll.js?v4"></script>
+<script type="application/javascript" src="../../src/iscroll.js"></script>
 
 <script type="text/javascript">
 
@@ -45,6 +45,8 @@
 	height:45px;
 	line-height:45px;
 	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
+	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
+	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 	padding:0;
 	color:#eee;
 	font-size:20px;
@@ -63,7 +65,9 @@
 	bottom:0; left:0;
 	width:100%;
 	height:48px;
-	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));;
+	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
+	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
+	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
 	padding:0;
 	border-top:1px solid #444;
 }

diff --git a/examples/ios-perfect-scrollbar/scrollbar.css b/examples/ios-perfect-scrollbar/scrollbar.css
@@ -45,6 +45,13 @@
 
 	/* The following is probably what you want to customize */
 	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	-o-box-sizing:border-box;
+	box-sizing:border-box;
+
 	border-width:3px;
 	-webkit-border-image:url(scrollbar.png) 6 6 6 6;
+	-moz-border-image:url(scrollbar.png) 6 6 6 6;
+	-o-border-image:url(scrollbar.png) 6 6 6 6;
+	border-image:url(scrollbar.png) 6 6 6 6;
 }
diff --git a/examples/ipad/index.html b/examples/ipad/index.html
@@ -7,7 +7,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>iScroll demo: iPad</title>
 
-<script type="application/javascript" src="../../src/iscroll.js?v4"></script>
+<script type="application/javascript" src="../../src/iscroll.js"></script>
 
 <script type="text/javascript">
 
@@ -57,7 +57,15 @@
 	width:100%; height:100%;
 	position:relative;
 	display:-webkit-box;
+	display:-moz-box;
+	display:-o-box;
+	display:box;
+
 	-webkit-box-orient:horizontal;
+	-moz-box-orient:horizontal;
+	-o-box-orient:horizontal;
+	box-orient:horizontal;
+
 	background:#424242;
 }
 
@@ -68,6 +76,9 @@
 
 #content {
 	-webkit-box-flex:1;
+	-moz-box-flex:1;
+	-o-box-flex:1;
+	box-flex:1;
 }
 
 #sidebar, #content {
@@ -78,13 +89,24 @@
 header {
 	height:43px; line-height:43px;
 	border-bottom:1px solid #838a9a;
-	background:#424242 -webkit-gradient(linear, 0 0, 0 100, from(#f4f5f7), to(#999da9));
+	background-color:#424242;
+	background-image:-webkit-gradient(linear, 0 0, 0 100, from(#f4f5f7), to(#999da9));
+	background-image:-moz-linear-gradient(top, #f4f5f7, #999da9);
+	background-image:-o-linear-gradient(top, #f4f5f7, #999da9);
+
 	color:#717880;
 	font-size:18px; font-weight:bold;
 	text-align:center;
 	text-shadow:0 1px 0 #fff;
 	-webkit-border-top-left-radius:4px;
+	-moz-border-top-left-radius:4px;
+	-o-border-top-left-radius:4px;
+	border-top-left-radius:4px;
+
 	-webkit-border-top-right-radius:4px;
+	-moz-border-top-right-radius:4px;
+	-o-border-top-right-radius:4px;
+	border-top-right-radius:4px;
 }
 
 #navScroller > li {
@@ -95,6 +117,9 @@
 
 #contentScroller {
 	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	-o-box-sizing:border-box;
+	box-sizing:border-box;
 	padding:20px;
 }
 

diff --git a/examples/lite/index.html b/examples/lite/index.html
@@ -43,6 +43,8 @@
 	height:45px;
 	line-height:45px;
 	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
+	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
+	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
 	padding:0;
 	color:#eee;
 	font-size:20px;
@@ -61,7 +63,9 @@
 	bottom:0; left:0;
 	width:100%;
 	height:48px;
-	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));;
+	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
+	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
+	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
 	padding:0;
 	border-top:1px solid #444;
 }