Permalink
Browse files

Make scroll work on ipad

  • Loading branch information...
1 parent 0c79d70 commit 1d4d7adca1a9d4d4a757d679848fa66bfd252e32 @javve committed Mar 5, 2014
Showing with 2,057 additions and 23 deletions.
  1. +1,988 −0 static/iscroll.js
  2. +37 −6 static/style.css
  3. +32 −17 templates/layout.mustache
View
View
@@ -17,6 +17,8 @@ body {
line-height: 1.3;
color: #626262;
position:relative;
+ overflow: hidden;
+ height:100%;
}
body.navigation-open {
margin-left:220px;
@@ -35,14 +37,14 @@ body {
}
.logotype-container {
- z-index:1;
+ z-index:2;
}
.burger,
.search-box {
- z-index:2;
+ z-index:3;
}
.navigation {
- z-index: 3;
+ z-index: 4;
}
p {
@@ -91,11 +93,38 @@ b {
}
.content_container {
+ position:absolute;
overflow: hidden;
width:100%;
+ height:100%;
}
.page {
- position: fixed;
+ height:100%;
+}
+.content_container_inner {
+ position: absolute;
+ z-index: 1;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ width: 15000px;
+ height: 100%;
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-text-size-adjust: none;
+ -moz-text-size-adjust: none;
+ -ms-text-size-adjust: none;
+ -o-text-size-adjust: none;
+ text-size-adjust: none;
+ margin:auto;
+ top:0;
+ bottom:0;
}
@@ -112,6 +141,7 @@ HEADER
text-transform: uppercase;
}
.logotype-container {
+ position:absolute;
text-align: center;
margin-top:60px;
padding-bottom:30px;
@@ -275,6 +305,7 @@ footer {
font-size: 16px;
font-size: 1.6rem;
text-transform: uppercase;
+ position:absolute;
}
footer li {
display:inline-block;
@@ -559,7 +590,7 @@ PRODUCT PAGE
}
-.content_container,
+/*.content_container,*/
.content_container_inner {
height:300px;
}
@@ -580,7 +611,7 @@ PRODUCT PAGE
height:300px;
}
@media only screen and (min-height: 710px) {
- .content_container,
+ /*.content_container,*/
.content_container_inner {
height:500px;
}
@@ -83,7 +83,7 @@
</ul>
</nav>
-<div class="page">
+<div class="page" id="page">
<div class="logotype-container {{#logotype}}with_logotype{{/logotype}} {{#no_logotype}}without_logotype{{/no_logotype}}">
<a class="logotype" href="{{store_url}}">
@@ -146,6 +146,7 @@
{{/store_email}}
</ul>
</footer>
+
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
@@ -158,7 +159,12 @@ $('.tictail_variations_select').dropkick({
</script>
<script src="{{assets_url}}/122675/js/jquery.magnific-popup.min.js"></script>
+<!--[if lt IE 9]>
<script src="{{assets_url}}/122675/js/adomas.javascript-mouse-wheel.js"></script>
+<![endif]-->
+<!--[if gte IE 9 | !IE ]><!-->
+<script src="/iscroll.js"></script>
+<![endif]-->
<script>
@@ -197,7 +203,7 @@ var init = {
set.productPageColumns();
set.productPageWidth();
}
- set.verticalAlign();
+ set.placeFooter();
},
mobile: function() {
if (device !== "mobile") {
@@ -236,21 +242,26 @@ var set = {
});
},
horizontalScroll: function() {
- var wait = false;
- $("html, body, *").mousewheel(function(e, delta) {
- var target = e.target || e.srcElement;
- if ($(target).closest('.navigation').size() == 0) {
- if (!wait && device === "desktop") {
- e.preventDefault();
- $('.content_container')[0].scrollLeft -= (delta * 30);
- wait = true;
- setTimeout(function() { wait = false}, 5);
+ if ($("html, body, *").mousewheel) {
+ var wait = false;
+ $("html, body, *").mousewheel(function(e, delta) {
+ var target = e.target || e.srcElement;
+ if ($(target).closest('.navigation').size() == 0) {
+ if (!wait && device === "desktop") {
+ e.preventDefault();
+ $('.content_container')[0].scrollLeft -= (delta * 30);
+ wait = true;
+ setTimeout(function() { wait = false}, 5);
+ }
}
- }
- });
+ });
+ } else {
+ document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
+ new IScroll('.content_container', { scrollX: true, scrollY: false, mouseWheel: true });
+ }
},
bodyHeight: function() {
- $('body').height($('html').height() - 20 - parseInt($('body').css('padding-top'), 10));
+ $('body').height($(window).height());
},
pageWidth: function() {
$('.page').width($(window).width());
@@ -322,19 +333,23 @@ var set = {
return false;
});
},
- verticalAlign: function() {
+ placeFooter: function() {
if (is.mobile()) {
return;
}
- var contentHeight = $('.content_container').height(),
+ var contentHeight = $('.content_container_inner').height(),
windowHeight = $(window).height(),
marginTop = windowHeight/2 - contentHeight/2 - $('.logotype-container').outerHeight();
$('.logotype-container').css('margin-top', marginTop+'px');
+
+ $('footer').css({
+ top: ($('.content_container').outerHeight(true) - $('.content_container_inner').outerHeight(false)) / 2 + $('.content_container_inner').outerHeight(false)
+ });
}
};
-set.verticalAlign();
+set.placeFooter();
$(window).resize(init.restart);
$(window).load(init.start);

0 comments on commit 1d4d7ad

Please sign in to comment.