Skip to content

Commit 41451f1

Browse files
peachananrpeachananr
committed
Add responsive fallback and moveTo public method
1 parent a5c2098 commit 41451f1

File tree

7 files changed

+262
-37
lines changed

7 files changed

+262
-37
lines changed

‎Demo/demo.html

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
1818
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
1919
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
20+
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
2021
<style>
2122
html {
2223
height: 100%;
@@ -322,11 +323,59 @@
322323
font-weight: 100;
323324
font-size: 21px;
324325
}
326+
327+
body.disabled-onepage-scroll .onepage-wrapper section {
328+
min-height: 100%;
329+
height: auto;
330+
}
331+
332+
body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container {
333+
padding: 20px;
334+
margin-top: 150px;
335+
-webkit-box-sizing: border-box;
336+
-moz-box-sizing: border-box;
337+
box-sizing: border-box;
338+
}
339+
340+
body.disabled-onepage-scroll section .page_container h1{
341+
text-align: center;
342+
font-size: 50px;
343+
}
344+
body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
345+
text-align: center;
346+
width: 100%;
347+
}
348+
349+
body.disabled-onepage-scroll .main section.page1 > img {
350+
position: absolute;
351+
width: 80%;
352+
left: 10%;
353+
}
354+
355+
body.disabled-onepage-scroll .main section > img {
356+
position: relative;
357+
max-width: 80%;
358+
bottom: 0;
359+
}
360+
body.disabled-onepage-scroll code {
361+
width: 95%;
362+
margin: 0 auto 25px;
363+
float: none;
364+
overflow: hidden;
365+
}
366+
367+
body.disabled-onepage-scroll .main section.page3 .page_container {
368+
width: 90%;
369+
margin-left: auto;
370+
margin-right: auto;
371+
right: 0;
372+
}
325373
</style>
326374
<script>
327375
$(document).ready(function(){
328376
$(".main").onepage_scroll({
329-
sectionContainer: "section"
377+
sectionContainer: "section",
378+
responsiveFallback: 600
330379
});
331380
});
332381

‎Demo/jquery.onepage-scroll.js

Lines changed: 76 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* ===========================================================
2-
* jquery-onepage-scroll.js v1.1.1
2+
* jquery-onepage-scroll.js v1.2
33
* ===========================================================
44
* Copyright 2013 Pete Rojwongsuriya.
55
* http://www.thepetedesign.com
@@ -25,7 +25,8 @@
2525
keyboard: true,
2626
beforeMove: null,
2727
afterMove: null,
28-
loop: false
28+
loop: false,
29+
responsiveFallback: false
2930
};
3031

3132
/*------------------------------------------------*/
@@ -48,7 +49,6 @@
4849
startY = touches[0].pageY;
4950
$this.bind('touchmove', touchmove);
5051
}
51-
event.preventDefault();
5252
}
5353

5454
function touchmove(event) {
@@ -73,7 +73,6 @@
7373
$this.unbind('touchmove', touchmove);
7474
}
7575
}
76-
event.preventDefault();
7776
}
7877

7978
});
@@ -175,6 +174,52 @@
175174
el.transformPage(settings, pos, index);
176175
}
177176

177+
$.fn.moveTo = function(page_index) {
178+
current = $(settings.sectionContainer + ".active")
179+
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
180+
if(next.length > 0) {
181+
current.removeClass("active")
182+
next.addClass("active")
183+
$(".onepage-pagination li a" + ".active").removeClass("active");
184+
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
185+
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
186+
$("body").addClass("viewing-page-"+next.data("index"))
187+
188+
pos = ((page_index - 1) * 100) * -1;
189+
el.transformPage(settings, pos, page_index);
190+
if (settings.updateURL == false) return false;
191+
}
192+
}
193+
194+
function responsive() {
195+
if ($(window).width() < settings.responsiveFallback) {
196+
$("body").addClass("disabled-onepage-scroll");
197+
$(document).unbind('mousewheel DOMMouseScroll');
198+
el.swipeEvents().unbind("swipeDown swipeUp");
199+
} else {
200+
if($("body").hasClass("disabled-onepage-scroll")) {
201+
$("body").removeClass("disabled-onepage-scroll");
202+
$("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
203+
}
204+
205+
206+
el.swipeEvents().bind("swipeDown", function(event){
207+
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
208+
el.moveUp();
209+
}).bind("swipeUp", function(event){
210+
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
211+
el.moveDown();
212+
});
213+
214+
$(document).bind('mousewheel DOMMouseScroll', function(event) {
215+
event.preventDefault();
216+
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
217+
init_scroll(event, delta);
218+
});
219+
}
220+
}
221+
222+
178223
function init_scroll(event, delta) {
179224
deltaOfInterest = delta;
180225
var timeNow = new Date().getTime();
@@ -206,9 +251,11 @@
206251
}
207252
});
208253

209-
el.swipeEvents().bind("swipeDown", function(){
254+
el.swipeEvents().bind("swipeDown", function(event){
255+
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
210256
el.moveUp();
211-
}).bind("swipeUp", function(){
257+
}).bind("swipeUp", function(event){
258+
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
212259
el.moveDown();
213260
});
214261

@@ -266,31 +313,43 @@
266313
}
267314

268315

269-
270316
$(document).bind('mousewheel DOMMouseScroll', function(event) {
271317
event.preventDefault();
272318
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
273-
init_scroll(event, delta);
319+
if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta);
274320
});
275321

322+
323+
if(settings.responsiveFallback != false) {
324+
$(window).resize(function() {
325+
responsive();
326+
});
327+
328+
responsive();
329+
}
330+
276331
if(settings.keyboard == true) {
277332
$(document).keydown(function(e) {
278333
var tag = e.target.tagName.toLowerCase();
279-
switch(e.which) {
280-
case 38:
281-
if (tag != 'input' && tag != 'textarea') el.moveUp()
282-
break;
283-
case 40:
284-
if (tag != 'input' && tag != 'textarea') el.moveDown()
285-
break;
286-
default: return;
334+
335+
if (!$("body").hasClass("disabled-onepage-scroll")) {
336+
switch(e.which) {
337+
case 38:
338+
if (tag != 'input' && tag != 'textarea') el.moveUp()
339+
break;
340+
case 40:
341+
if (tag != 'input' && tag != 'textarea') el.moveDown()
342+
break;
343+
default: return;
344+
}
287345
}
346+
288347
e.preventDefault();
289348
});
290349
}
291350
return false;
292-
293351
}
294352

353+
295354
}(window.jQuery);
296355

‎Demo/onepage-scroll.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,29 @@ body, .onepage-wrapper, html {
6666
border: 1px solid black;
6767
margin-top: -4px;
6868
left: 8px;
69+
}
70+
71+
.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
72+
overflow: auto;
73+
}
74+
75+
.disabled-onepage-scroll .onepage-wrapper .section {
76+
position: relative !important;
77+
top: auto !important;
78+
}
79+
.disabled-onepage-scroll .onepage-wrapper {
80+
-webkit-transform: none !important;
81+
-moz-transform: none !important;
82+
transform: none !important;
83+
-ms-transform: none !important;
84+
min-height: 100%;
85+
}
86+
87+
88+
.disabled-onepage-scroll .onepage-pagination {
89+
display: none;
90+
}
91+
92+
body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
93+
position: inherit;
6994
}

‎README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ $(".main").onepage_scroll({
3838
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
3939
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
4040
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
41-
loop: false // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
41+
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
42+
responsiveFallback: false // You can fallback to normal page scroll by defining the width of the browser in which you want the responsive fallback to be triggered. For example, set this to 600 and whenever the browser's width is less than 600, the fallback will kick in.
4243
});
4344
````
4445
And that's it. Now, your website should work the same way Apple's iPhone 5S website does. You should be able to swipe up/down as well (thanks to [Eike Send](https://github.com/eikes) for his swipe events!) when viewing your website on mobile phones.
@@ -60,6 +61,13 @@ This method allows you to move the page down by one. This action is equivalent t
6061
$(".main").moveDown();
6162
````
6263

64+
### $.fn.moveTo(page_index)
65+
This method allows you to move to the specified page index programatically.
66+
67+
````javascript
68+
$(".main").moveTo(3);
69+
````
70+
6371
## Callbacks
6472
You can use callbacks to perform actions before or after the page move.
6573

0 commit comments

Comments
 (0)