Permalink
Browse files

v4.1

  • Loading branch information...
1 parent 0398d2a commit 995fafbb915fdb108cf22152147e889fbcabcb87 @cubiq committed Jun 8, 2011
View
@@ -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
View
@@ -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
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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;
@@ -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;
}
@@ -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);
}
@@ -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;
@@ -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;
}
@@ -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;
}
View
@@ -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;
}
View
@@ -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;
}
Oops, something went wrong.

0 comments on commit 995fafb

Please sign in to comment.