Skip to content

Commit

Permalink
Add responsive fallback and moveTo public method
Browse files Browse the repository at this point in the history
  • Loading branch information
@peachananr
peachananr committed Nov 5, 2013
1 parent a5c2098 commit 41451f1
Show file tree
Hide file tree
Showing 7 changed files with 262 additions and 37 deletions.
51 changes: 50 additions & 1 deletion Demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
html {
height: 100%;
Expand Down Expand Up @@ -322,11 +323,59 @@
font-weight: 100;
font-size: 21px;
}

body.disabled-onepage-scroll .onepage-wrapper section {
min-height: 100%;
height: auto;
}

body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container {
padding: 20px;
margin-top: 150px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body.disabled-onepage-scroll section .page_container h1{
text-align: center;
font-size: 50px;
}
body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
text-align: center;
width: 100%;
}

body.disabled-onepage-scroll .main section.page1 > img {
position: absolute;
width: 80%;
left: 10%;
}

body.disabled-onepage-scroll .main section > img {
position: relative;
max-width: 80%;
bottom: 0;
}
body.disabled-onepage-scroll code {
width: 95%;
margin: 0 auto 25px;
float: none;
overflow: hidden;
}

body.disabled-onepage-scroll .main section.page3 .page_container {
width: 90%;
margin-left: auto;
margin-right: auto;
right: 0;
}
</style>
<script>
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section"
sectionContainer: "section",
responsiveFallback: 600
});
});

Expand Down
93 changes: 76 additions & 17 deletions Demo/jquery.onepage-scroll.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* ===========================================================
* jquery-onepage-scroll.js v1.1.1
* jquery-onepage-scroll.js v1.2
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
Expand All @@ -25,7 +25,8 @@
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false
loop: false,
responsiveFallback: false
};

/*------------------------------------------------*/
Expand All @@ -48,7 +49,6 @@
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
event.preventDefault();
}

function touchmove(event) {
Expand All @@ -73,7 +73,6 @@
$this.unbind('touchmove', touchmove);
}
}
event.preventDefault();
}

});
Expand Down Expand Up @@ -175,6 +174,52 @@
el.transformPage(settings, pos, index);
}

$.fn.moveTo = function(page_index) {
current = $(settings.sectionContainer + ".active")
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
if(next.length > 0) {
current.removeClass("active")
next.addClass("active")
$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))

pos = ((page_index - 1) * 100) * -1;
el.transformPage(settings, pos, page_index);
if (settings.updateURL == false) return false;
}
}

function responsive() {
if ($(window).width() < settings.responsiveFallback) {
$("body").addClass("disabled-onepage-scroll");
$(document).unbind('mousewheel DOMMouseScroll');
el.swipeEvents().unbind("swipeDown swipeUp");
} else {
if($("body").hasClass("disabled-onepage-scroll")) {
$("body").removeClass("disabled-onepage-scroll");
$("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
}


el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});

$(document).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
}
}


function init_scroll(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
Expand Down Expand Up @@ -206,9 +251,11 @@
}
});

el.swipeEvents().bind("swipeDown", function(){
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(){
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});

Expand Down Expand Up @@ -266,31 +313,43 @@
}



$(document).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta);
});


if(settings.responsiveFallback != false) {
$(window).resize(function() {
responsive();
});

responsive();
}

if(settings.keyboard == true) {
$(document).keydown(function(e) {
var tag = e.target.tagName.toLowerCase();
switch(e.which) {
case 38:
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 40:
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
default: return;

if (!$("body").hasClass("disabled-onepage-scroll")) {
switch(e.which) {
case 38:
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 40:
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
default: return;
}
}

e.preventDefault();
});
}
return false;

}


}(window.jQuery);

25 changes: 25 additions & 0 deletions Demo/onepage-scroll.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,29 @@ body, .onepage-wrapper, html {
border: 1px solid black;
margin-top: -4px;
left: 8px;
}

.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
overflow: auto;
}

.disabled-onepage-scroll .onepage-wrapper .section {
position: relative !important;
top: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-ms-transform: none !important;
min-height: 100%;
}


.disabled-onepage-scroll .onepage-pagination {
display: none;
}

body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
position: inherit;
}
10 changes: 9 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ $(".main").onepage_scroll({
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
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.
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.
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.
});
````
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.
Expand All @@ -60,6 +61,13 @@ This method allows you to move the page down by one. This action is equivalent t
$(".main").moveDown();
````

### $.fn.moveTo(page_index)
This method allows you to move to the specified page index programatically.

````javascript
$(".main").moveTo(3);
````

## Callbacks
You can use callbacks to perform actions before or after the page move.

Expand Down
Loading

0 comments on commit 41451f1

Please sign in to comment.