Skip to content

Commit

Permalink
Add keyboard support, callbacks and loop options
Browse files Browse the repository at this point in the history
  • Loading branch information
@peachananr
peachananr committed Oct 14, 2013
1 parent 96cdec1 commit f5d7b9d
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 93 deletions.
1 change: 0 additions & 1 deletion Demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,6 @@ <h2>You can customise the animation timing, the selector or even the animation e
</div>
</div>
</section>

</div>
<a class="back" href="http://www.thepetedesign.com/#design">Back to The Pete Design</a>
<a href="https://github.com/peachananr/onepage-scroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
Expand Down
119 changes: 74 additions & 45 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
* jquery-onepage-scroll.js v1.1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
Expand All @@ -9,6 +9,8 @@
*
* Credit: Eike Send for the awesome swipe event
* https://github.com/peachananr/onepage-scroll
*
* License: GPL v3
*
* ========================================================== */

Expand All @@ -19,7 +21,11 @@
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false
};

/*------------------------------------------------*/
Expand Down Expand Up @@ -85,7 +91,7 @@
quietPeriod = 500,
paginationList = "";

$.fn.transformPage = function(settings, pos) {
$.fn.transformPage = function(settings, pos, index) {
$(this).css({
"-webkit-transform": "translate3d(0, " + pos + "%, 0)",
"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
Expand All @@ -96,59 +102,67 @@
"transform": "translate3d(0, " + pos + "%, 0)",
"transition": "all " + settings.animationTime + "ms " + settings.easing
});
$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
if (typeof settings.afterMove == 'function') settings.afterMove(index);
});
}

$.fn.moveDown = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
if(index < total) {
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next) {
current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (index + 1) + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
}
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next.length < 1) {
pos = 0;
next = $(settings.sectionContainer + "[data-index='1']");
}else {
pos = (index * 100) * -1;
el.transformPage(settings, pos);
}
if (typeof settings.beforeMove == 'function') settings.beforeMove( current.data("index"));
current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}

$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, index);
}

$.fn.moveUp = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
if(index <= total && index > 1) {
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");

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

if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
}
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");

if(next.length < 1) {
pos = ((total - 1) * 100) * -1;
next = $(settings.sectionContainer + "[data-index='"+total+"']");
}else {
pos = ((next.data("index") - 1) * 100) * -1;
el.transformPage(settings, pos);
}
if (typeof settings.beforeMove == 'function') settings.beforeMove(current.data("index"));
current.removeClass("active")
next.addClass("active")
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, index);
}

function init_scroll(event, delta) {
Expand Down Expand Up @@ -213,7 +227,7 @@
}
}
pos = ((init_index - 1) * 100) * -1;
el.transformPage(settings, pos);
el.transformPage(settings, pos, init_index);

}else{
$(settings.sectionContainer + "[data-index='1']").addClass("active")
Expand All @@ -235,7 +249,7 @@
$("body").addClass("viewing-page-"+next.data("index"))
}
pos = ((page_index - 1) * 100) * -1;
el.transformPage(settings, pos);
el.transformPage(settings, pos, page_index);
}
if (settings.updateURL == false) return false;
});
Expand All @@ -248,10 +262,25 @@
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});

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;
}
e.preventDefault();
});
}
return false;

}

}(window.jQuery);


30 changes: 29 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ $(".main").onepage_scroll({
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
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.
});
````
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 @@ -57,6 +60,31 @@ This method allows you to move the page down by one. This action is equivalent t
$(".main").moveDown();
````

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

### beforeMove(current_page_index)
This callback gets called before the plugin performs its move.

````javascript
$(".main").onepage_scroll({
beforeMove: function(index) {
...
}
});
````

### afterMove(next_page_index)
This callback gets called after the move animation was performed.

````javascript
$(".main").onepage_scroll({
afterMove: function(index) {
...
}
});
````

If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr).

## Other Resources
Expand Down
Loading

0 comments on commit f5d7b9d

Please sign in to comment.