From f6c948d284c8716e6fe28771bb373a0caef89df4 Mon Sep 17 00:00:00 2001 From: peachananr Date: Wed, 4 Jun 2014 10:29:37 +0700 Subject: [PATCH] 1.3 release. Direction options, more hotkeys, more fixes --- Demo/jquery.onepage-scroll.js | 232 +++++++---- Demo/onepage-scroll.css | 6 +- README.md | 39 +- jquery.onepage-scroll.js | 716 +++++++++++++++++++--------------- jquery.onepage-scroll.min.js | 2 +- onepage-scroll.css | 6 +- 6 files changed, 574 insertions(+), 427 deletions(-) diff --git a/Demo/jquery.onepage-scroll.js b/Demo/jquery.onepage-scroll.js index 1f3d1ae..133a8a7 100644 --- a/Demo/jquery.onepage-scroll.js +++ b/Demo/jquery.onepage-scroll.js @@ -1,5 +1,5 @@ /* =========================================================== - * jquery-onepage-scroll.js v1.2.1 + * jquery-onepage-scroll.js v1.3 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com @@ -9,13 +9,13 @@ * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll - * + * * License: GPL v3 * * ========================================================== */ !function($){ - + var defaults = { sectionContainer: "section", easing: "ease", @@ -25,14 +25,15 @@ keyboard: true, beforeMove: null, afterMove: null, - loop: false, - responsiveFallback: false + loop: true, + responsiveFallback: false, + direction : 'vertical' }; - + /*------------------------------------------------*/ - /* Credit: Eike Send for the awesome swipe event */ + /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ - + $.fn.swipeEvents = function() { return this.each(function() { @@ -77,7 +78,7 @@ }); }; - + $.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), @@ -86,27 +87,28 @@ total = sections.length, status = "off", topPos = 0, + leftPos = 0, lastAnimation = 0, quietPeriod = 500, paginationList = ""; - + $.fn.transformPage = function(settings, pos, index) { if (typeof settings.beforeMove == 'function') settings.beforeMove(index); $(this).css({ - "-webkit-transform": "translate3d(0, " + pos + "%, 0)", - "-webkit-transition": "-webkit-transform " + settings.animationTime + "ms " + settings.easing, - "-moz-transform": "translate3d(0, " + pos + "%, 0)", - "-moz-transition": "-moz-transform " + settings.animationTime + "ms " + settings.easing, - "-ms-transform": "translate3d(0, " + pos + "%, 0)", - "-ms-transition": "-ms-transform " + settings.animationTime + "ms " + settings.easing, - "transform": "translate3d(0, " + pos + "%, 0)", - "transition": "transform " + settings.animationTime + "ms " + settings.easing + "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, + "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, + "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, + "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "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"); @@ -119,7 +121,7 @@ } else { return } - + }else { pos = (index * 100) * -1; } @@ -130,23 +132,23 @@ $(".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, next.data("index")); } - + $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); - + if(next.length < 1) { if (settings.loop == true) { pos = ((total - 1) * 100) * -1; @@ -167,14 +169,14 @@ } $("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, next.data("index")); } - + $.fn.moveTo = function(page_index) { current = $(settings.sectionContainer + ".active") next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); @@ -186,9 +188,9 @@ $(".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; - + if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); history.pushState( {}, document.title, href ); @@ -196,39 +198,59 @@ el.transformPage(settings, pos, page_index); } } - + function responsive() { - if ($(window).width() < settings.responsiveFallback) { + //start modification + var valForTest = false; + var typeOfRF = typeof settings.responsiveFallback + + if(typeOfRF == "number"){ + valForTest = $(window).width() < settings.responsiveFallback; + } + if(typeOfRF == "boolean"){ + valForTest = settings.responsiveFallback; + } + if(typeOfRF == "function"){ + valFunction = settings.responsiveFallback(); + valForTest = valFunction; + typeOFv = typeof valForTest; + if(typeOFv == "number"){ + valForTest = $(window).width() < valFunction; + } + } + + //end modification + if (valForTest) { $("body").addClass("disabled-onepage-scroll"); - $(document).unbind('mousewheel DOMMouseScroll'); + $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); 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){ + + + el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); - }).bind("swipeUp", function(event){ + }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); - - $(document).bind('mousewheel DOMMouseScroll', function(event) { + + $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } } - - + + function init_scroll(event, delta) { - var deltaOfInterest = delta, - timeNow = new Date().getTime(); + deltaOfInterest = delta; + var timeNow = new Date().getTime(); // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); @@ -242,85 +264,119 @@ } lastAnimation = timeNow; } - + // Prepare everything before binding wheel scroll - + el.addClass("onepage-wrapper").css("position","relative"); $.each( sections, function(i) { - $(this).addClass("ops-section").attr("data-index", i+1); - topPos = topPos + 100; + $(this).css({ + position: "absolute", + top: topPos + "%" + }).addClass("section").attr("data-index", i+1); + + + $(this).css({ + position: "absolute", + left: ( settings.direction == 'horizontal' ) + ? leftPos + "%" + : 0, + top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) + ? topPos + "%" + : 0 + }); + + if (settings.direction == 'horizontal') + leftPos = leftPos + 100; + else + topPos = topPos + 100; + + if(settings.pagination == true) { paginationList += "
    • " } }); - - el.swipeEvents().bind("swipeDown", function(event){ + + el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); - }).bind("swipeUp", function(event){ + }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); - el.moveDown(); + el.moveDown(); }); - + // Create Pagination and Display Them - if(settings.pagination == true) { - $("").prependTo("body"); - posTop = (el.find(".onepage-pagination").height() / 2) * -1; - el.find(".onepage-pagination").css("margin-top", posTop); + if (settings.pagination == true) { + if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); + + if( settings.direction == 'horizontal' ) { + posLeft = (el.find(".onepage-pagination").width() / 2) * -1; + el.find(".onepage-pagination").css("margin-left", posLeft); + } else { + posTop = (el.find(".onepage-pagination").height() / 2) * -1; + el.find(".onepage-pagination").css("margin-top", posTop); + } + $('ul.onepage-pagination').html(paginationList); } - + if(window.location.hash != "" && window.location.hash != "#1") { init_index = window.location.hash.replace("#", "") - $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") - $("body").addClass("viewing-page-"+ init_index) - if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); - next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); - if(next) { - next.addClass("active") - if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_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('#')) + "#" + (init_index); - history.pushState( {}, document.title, href ); + if (parseInt(init_index) <= total && parseInt(init_index) > 0) { + $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") + $("body").addClass("viewing-page-"+ init_index) + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); + + next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); + if(next) { + next.addClass("active") + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_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('#')) + "#" + (init_index); + history.pushState( {}, document.title, href ); + } } + pos = ((init_index - 1) * 100) * -1; + el.transformPage(settings, pos, init_index); + } else { + $(settings.sectionContainer + "[data-index='1']").addClass("active") + $("body").addClass("viewing-page-1") + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } - pos = ((init_index - 1) * 100) * -1; - el.transformPage(settings, pos, init_index); - }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } + if(settings.pagination == true) { $(".onepage-pagination li a").click(function (){ var page_index = $(this).data("index"); el.moveTo(page_index); }); } - - - $(document).bind('mousewheel DOMMouseScroll', function(event) { + + + $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 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(); - + if (!$("body").hasClass("disabled-onepage-scroll")) { switch(e.which) { case 38: @@ -329,15 +385,27 @@ case 40: if (tag != 'input' && tag != 'textarea') el.moveDown() break; + case 33: //pageg up + if (tag != 'input' && tag != 'textarea') el.moveUp() + break; + case 34: //page dwn + if (tag != 'input' && tag != 'textarea') el.moveDown() + break; + case 36: //home + el.moveTo(1); + break; + case 35: //end + el.moveTo(total); + break; default: return; } } - + }); } return false; } - - + + }(window.jQuery); diff --git a/Demo/onepage-scroll.css b/Demo/onepage-scroll.css index e1076ab..3d4415f 100644 --- a/Demo/onepage-scroll.css +++ b/Demo/onepage-scroll.css @@ -23,10 +23,9 @@ body, .onepage-wrapper, html { -webkit-transform-style: preserve-3d; } -.onepage-wrapper .ops-section { +.onepage-wrapper .section { width: 100%; height: 100%; - position: relative; } .onepage-pagination { @@ -73,9 +72,10 @@ body, .onepage-wrapper, html { overflow: auto; } -.disabled-onepage-scroll .onepage-wrapper .ops-section { +.disabled-onepage-scroll .onepage-wrapper .section { position: relative !important; top: auto !important; + left: auto !important; } .disabled-onepage-scroll .onepage-wrapper { -webkit-transform: none !important; diff --git a/README.md b/README.md index a245adf..f961a32 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -#One Page Scroll by Pete R. +#One Page Scroll 1.3 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) @@ -17,12 +17,6 @@ see: http://jsfiddle.net/33WJx/ ## Demo [View demo](http://www.thepetedesign.com/demos/onepage_scroll_demo.html) -##Looking for a Pure JS version? -[Pure JS Version](http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html) - -##Looking for a Zepto JS version? -[Zepto Js Version](http://www.thepetedesign.com/demos/zepto_onepage_scroll_demo.html) - ## Compatibility Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE. @@ -57,13 +51,32 @@ $(".main").onepage_scroll({ 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. keyboard: true, // You can activate the keyboard controls - responsiveFallback: false // You can fallback to normal page scroll by defining the width of the browser in which + 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. + direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical". }); ```` 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. +## Keyboard Shortcuts +You can trigger page move with hotkeys as well: + +### Up arrow / Page Up +Pressing the up arrow or the page up key allows you to move the page up by one. + + +### Down arrow / Page Donw +Pressing the down arrow or the page down key allows you to move the page down by one. + + +### Home +Pressing the home key brings you back to the first page. + + +### End +Pressing the end key brings you to the last page. + ## Public Methods You can also trigger page move programmatically as well: @@ -91,23 +104,23 @@ This method allows you to move to the specified page index programatically. ## Callbacks You can use callbacks to perform actions before or after the page move. -### beforeMove(next_page_index, next_section_element) +### beforeMove(current_page_index) This callback gets called before the plugin performs its move. ````javascript $(".main").onepage_scroll({ - beforeMove: function(index, next_el) { + beforeMove: function(index) { ... } }); ```` -### afterMove(next_page_index, next_section_element) +### afterMove(next_page_index) This callback gets called after the move animation was performed. ````javascript $(".main").onepage_scroll({ - afterMove: function(index, next_el) { + afterMove: function(index) { ... } }); @@ -116,8 +129,6 @@ This callback gets called after the move animation was performed. 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 -- [Pure JS Version](http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html) -- [Zepto Js Version](http://www.thepetedesign.com/demos/zepto_onepage_scroll_demo.html) - [OnePageScroll.js: Creating an Apple’s iPhone 5S Website](http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/) - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js) - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) diff --git a/jquery.onepage-scroll.js b/jquery.onepage-scroll.js index e4c7dc2..133a8a7 100644 --- a/jquery.onepage-scroll.js +++ b/jquery.onepage-scroll.js @@ -1,5 +1,5 @@ /* =========================================================== - * jquery-onepage-scroll.js v1.2.2 + * jquery-onepage-scroll.js v1.3 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com @@ -9,335 +9,403 @@ * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll - * + * * License: GPL v3 * * ========================================================== */ -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else if (typeof exports === 'object') { - // Node/CommonJS - factory(require('jquery')); - } else { - // Browser globals - factory(jQuery); - } -}(function ($) { - var defaults = { - sectionContainer: "section", - easing: "ease", - animationTime: 1000, - pagination: true, - updateURL: false, - keyboard: true, - beforeMove: null, - afterMove: null, - loop: false, - responsiveFallback: false + +!function($){ + + var defaults = { + sectionContainer: "section", + easing: "ease", + animationTime: 1000, + pagination: true, + updateURL: false, + keyboard: true, + beforeMove: null, + afterMove: null, + loop: true, + responsiveFallback: false, + direction : 'vertical' }; /*------------------------------------------------*/ /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ - $.fn.swipeEvents = function () { - return this.each(function() { - var startX, - startY, - $this = $(this); - - $this.bind('touchstart', touchstart); - - function touchstart(event) { - var touches = event.originalEvent.touches; - if (touches && touches.length) { - startX = touches[0].pageX; - startY = touches[0].pageY; - $this.bind('touchmove', touchmove); - } - } - - function touchmove(event) { - var touches = event.originalEvent.touches; - if (touches && touches.length) { - var deltaX = startX - touches[0].pageX; - var deltaY = startY - touches[0].pageY; - - if (deltaX >= 50) { - $this.trigger("swipeLeft"); - } - if (deltaX <= -50) { - $this.trigger("swipeRight"); - } - if (deltaY >= 50) { - $this.trigger("swipeUp"); - } - if (deltaY <= -50) { - $this.trigger("swipeDown"); - } - if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { - $this.unbind('touchmove', touchmove); - } - } - } - - }); - }; - $.fn.onepage_scroll = function(options){ - var settings = $.extend({}, defaults, options), - el = $(this), - sections = $(settings.sectionContainer) - total = sections.length, - status = "off", - topPos = 0, - lastAnimation = 0, - quietPeriod = 500, - paginationList = ""; - - $.fn.transformPage = function(settings, pos, index, next_el) { - if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el); - $(this).css({ - "-webkit-transform": "translate3d(0, " + pos + "%, 0)", - "-webkit-transition": "-webkit-transform " + settings.animationTime + "ms " + settings.easing, - "-moz-transform": "translate3d(0, " + pos + "%, 0)", - "-moz-transition": "-moz-transform " + settings.animationTime + "ms " + settings.easing, - "-ms-transform": "translate3d(0, " + pos + "%, 0)", - "-ms-transition": "-ms-transform " + settings.animationTime + "ms " + settings.easing, - "transform": "translate3d(0, " + pos + "%, 0)", - "transition": "transform " + settings.animationTime + "ms " + settings.easing - }); - $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { - if (typeof settings.afterMove == 'function') settings.afterMove(index, next_el); - }); - } - - $.fn.moveDown = function() { - var el = $(this) - index = $(settings.sectionContainer +".active").data("index") || 1; - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); - if(next.length < 1) { - if (settings.loop == true) { - pos = 0; - next = $(settings.sectionContainer + "[data-index='1']"); - } else { - return - } - - }else { - pos = (index * 100) * -1; - } - 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, next.data("index"), next); - } - - $.fn.moveUp = function() { - var el = $(this) - index = $(settings.sectionContainer +".active").data("index"); - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); - - if(next.length < 1) { - if (settings.loop == true) { - pos = ((total - 1) * 100) * -1; - next = $(settings.sectionContainer + "[data-index='"+total+"']"); - } - else { - return - } - }else { - pos = ((next.data("index") - 1) * 100) * -1; - } - 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, next.data("index"), next); - } - - $.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; - - if (history.replaceState && settings.updateURL == true) { - var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); - history.pushState( {}, document.title, href ); - } - el.transformPage(settings, pos, page_index, next); - } - } - - 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) { - var deltaOfInterest = delta, - timeNow = new Date().getTime(); - // Cancel scroll if currently animating or within quiet period - if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { - event.preventDefault(); - return; - } - - if (deltaOfInterest < 0) { - el.moveDown() - } else { - el.moveUp() - } - lastAnimation = timeNow; - } - - // Prepare everything before binding wheel scroll - - el.addClass("onepage-wrapper").css("position","relative"); - $.each( sections, function(i) { - $(this).addClass("ops-section").attr("data-index", i+1); - topPos = topPos + 100; - if(settings.pagination == true) { - paginationList += "
    • " - } - }); - - 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(); - }); - - // Create Pagination and Display Them - if(settings.pagination == true) { - $("").prependTo("body"); - posTop = (el.find(".onepage-pagination").height() / 2) * -1; - el.find(".onepage-pagination").css("margin-top", posTop); - } - - if(window.location.hash != "" && window.location.hash != "#1") { - init_index = window.location.hash.replace("#", "") - $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") - $("body").addClass("viewing-page-"+ init_index) - if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); - - next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); - if(next) { - next.addClass("active") - if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_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('#')) + "#" + (init_index); - history.pushState( {}, document.title, href ); - } - } - pos = ((init_index - 1) * 100) * -1; - el.transformPage(settings, pos, init_index); - - }else{ - $(settings.sectionContainer + "[data-index='1']").addClass("active") - $("body").addClass("viewing-page-1") - if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); - } - if(settings.pagination == true) { - $(".onepage-pagination li a").click(function (){ - var page_index = $(this).data("index"); - el.moveTo(page_index); - }); - } - - - $(document).bind('mousewheel DOMMouseScroll', function(event) { - event.preventDefault(); - var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; - 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(); - - 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; - } - } - - }); - } - return false; - } -})); + $.fn.swipeEvents = function() { + return this.each(function() { + + var startX, + startY, + $this = $(this); + + $this.bind('touchstart', touchstart); + + function touchstart(event) { + var touches = event.originalEvent.touches; + if (touches && touches.length) { + startX = touches[0].pageX; + startY = touches[0].pageY; + $this.bind('touchmove', touchmove); + } + } + + function touchmove(event) { + var touches = event.originalEvent.touches; + if (touches && touches.length) { + var deltaX = startX - touches[0].pageX; + var deltaY = startY - touches[0].pageY; + + if (deltaX >= 50) { + $this.trigger("swipeLeft"); + } + if (deltaX <= -50) { + $this.trigger("swipeRight"); + } + if (deltaY >= 50) { + $this.trigger("swipeUp"); + } + if (deltaY <= -50) { + $this.trigger("swipeDown"); + } + if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { + $this.unbind('touchmove', touchmove); + } + } + } + + }); + }; + + + $.fn.onepage_scroll = function(options){ + var settings = $.extend({}, defaults, options), + el = $(this), + sections = $(settings.sectionContainer) + total = sections.length, + status = "off", + topPos = 0, + leftPos = 0, + lastAnimation = 0, + quietPeriod = 500, + paginationList = ""; + + $.fn.transformPage = function(settings, pos, index) { + if (typeof settings.beforeMove == 'function') settings.beforeMove(index); + $(this).css({ + "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, + "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, + "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", + "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, + "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "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"); + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); + if(next.length < 1) { + if (settings.loop == true) { + pos = 0; + next = $(settings.sectionContainer + "[data-index='1']"); + } else { + return + } + + }else { + pos = (index * 100) * -1; + } + if (typeof settings.beforeMove == 'function') settings.beforeMove( next.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, next.data("index")); + } + + $.fn.moveUp = function() { + var el = $(this) + index = $(settings.sectionContainer +".active").data("index"); + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); + + if(next.length < 1) { + if (settings.loop == true) { + pos = ((total - 1) * 100) * -1; + next = $(settings.sectionContainer + "[data-index='"+total+"']"); + } + else { + return + } + }else { + pos = ((next.data("index") - 1) * 100) * -1; + } + if (typeof settings.beforeMove == 'function') settings.beforeMove(next.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, next.data("index")); + } + + $.fn.moveTo = function(page_index) { + current = $(settings.sectionContainer + ".active") + next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); + if(next.length > 0) { + if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); + 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; + + if (history.replaceState && settings.updateURL == true) { + var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); + history.pushState( {}, document.title, href ); + } + el.transformPage(settings, pos, page_index); + } + } + + function responsive() { + //start modification + var valForTest = false; + var typeOfRF = typeof settings.responsiveFallback + + if(typeOfRF == "number"){ + valForTest = $(window).width() < settings.responsiveFallback; + } + if(typeOfRF == "boolean"){ + valForTest = settings.responsiveFallback; + } + if(typeOfRF == "function"){ + valFunction = settings.responsiveFallback(); + valForTest = valFunction; + typeOFv = typeof valForTest; + if(typeOFv == "number"){ + valForTest = $(window).width() < valFunction; + } + } + + //end modification + if (valForTest) { + $("body").addClass("disabled-onepage-scroll"); + $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); + 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 MozMousePixelScroll', 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(); + // Cancel scroll if currently animating or within quiet period + if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { + event.preventDefault(); + return; + } + + if (deltaOfInterest < 0) { + el.moveDown() + } else { + el.moveUp() + } + lastAnimation = timeNow; + } + + // Prepare everything before binding wheel scroll + + el.addClass("onepage-wrapper").css("position","relative"); + $.each( sections, function(i) { + $(this).css({ + position: "absolute", + top: topPos + "%" + }).addClass("section").attr("data-index", i+1); + + + $(this).css({ + position: "absolute", + left: ( settings.direction == 'horizontal' ) + ? leftPos + "%" + : 0, + top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) + ? topPos + "%" + : 0 + }); + + if (settings.direction == 'horizontal') + leftPos = leftPos + 100; + else + topPos = topPos + 100; + + + if(settings.pagination == true) { + paginationList += "
    • " + } + }); + + 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(); + }); + + // Create Pagination and Display Them + if (settings.pagination == true) { + if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); + + if( settings.direction == 'horizontal' ) { + posLeft = (el.find(".onepage-pagination").width() / 2) * -1; + el.find(".onepage-pagination").css("margin-left", posLeft); + } else { + posTop = (el.find(".onepage-pagination").height() / 2) * -1; + el.find(".onepage-pagination").css("margin-top", posTop); + } + $('ul.onepage-pagination').html(paginationList); + } + + if(window.location.hash != "" && window.location.hash != "#1") { + init_index = window.location.hash.replace("#", "") + + if (parseInt(init_index) <= total && parseInt(init_index) > 0) { + $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") + $("body").addClass("viewing-page-"+ init_index) + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); + + next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); + if(next) { + next.addClass("active") + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_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('#')) + "#" + (init_index); + history.pushState( {}, document.title, href ); + } + } + pos = ((init_index - 1) * 100) * -1; + el.transformPage(settings, pos, init_index); + } else { + $(settings.sectionContainer + "[data-index='1']").addClass("active") + $("body").addClass("viewing-page-1") + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); + } + }else{ + $(settings.sectionContainer + "[data-index='1']").addClass("active") + $("body").addClass("viewing-page-1") + if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); + } + + if(settings.pagination == true) { + $(".onepage-pagination li a").click(function (){ + var page_index = $(this).data("index"); + el.moveTo(page_index); + }); + } + + + $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { + event.preventDefault(); + var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; + 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(); + + 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; + case 33: //pageg up + if (tag != 'input' && tag != 'textarea') el.moveUp() + break; + case 34: //page dwn + if (tag != 'input' && tag != 'textarea') el.moveDown() + break; + case 36: //home + el.moveTo(1); + break; + case 35: //end + el.moveTo(total); + break; + default: return; + } + } + + }); + } + return false; + } + + +}(window.jQuery); + diff --git a/jquery.onepage-scroll.min.js b/jquery.onepage-scroll.min.js index 90f0e56..9411c31 100644 --- a/jquery.onepage-scroll.min.js +++ b/jquery.onepage-scroll.min.js @@ -1 +1 @@ -!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){var b={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:!0,updateURL:!1,keyboard:!0,beforeMove:null,afterMove:null,loop:!1,responsiveFallback:!1};a.fn.swipeEvents=function(){return this.each(function(){function e(a){var e=a.originalEvent.touches;e&&e.length&&(b=e[0].pageX,c=e[0].pageY,d.bind("touchmove",f))}function f(a){var e=a.originalEvent.touches;if(e&&e.length){var g=b-e[0].pageX,h=c-e[0].pageY;g>=50&&d.trigger("swipeLeft"),-50>=g&&d.trigger("swipeRight"),h>=50&&d.trigger("swipeUp"),-50>=h&&d.trigger("swipeDown"),(Math.abs(g)>=50||Math.abs(h)>=50)&&d.unbind("touchmove",f)}}var b,c,d=a(this);d.bind("touchstart",e)})},a.fn.onepage_scroll=function(c){function g(){a(window).width()c?e.moveDown():e.moveUp(),lastAnimation=f,void 0)}var d=a.extend({},b,c),e=a(this),f=a(d.sectionContainer);if(total=f.length,status="off",topPos=0,lastAnimation=0,quietPeriod=500,paginationList="",a.fn.transformPage=function(b,c,d,e){"function"==typeof b.beforeMove&&b.beforeMove(d,e),a(this).css({"-webkit-transform":"translate3d(0, "+c+"%, 0)","-webkit-transition":"-webkit-transform "+b.animationTime+"ms "+b.easing,"-moz-transform":"translate3d(0, "+c+"%, 0)","-moz-transition":"-moz-transform "+b.animationTime+"ms "+b.easing,"-ms-transform":"translate3d(0, "+c+"%, 0)","-ms-transition":"-ms-transform "+b.animationTime+"ms "+b.easing,transform:"translate3d(0, "+c+"%, 0)",transition:"transform "+b.animationTime+"ms "+b.easing}),a(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){"function"==typeof b.afterMove&&b.afterMove(d,e)})},a.fn.moveDown=function(){var b=a(this);if(index=a(d.sectionContainer+".active").data("index"),current=a(d.sectionContainer+"[data-index='"+index+"']"),next=a(d.sectionContainer+"[data-index='"+(index+1)+"']"),next.length<1){if(1!=d.loop)return;pos=0,next=a(d.sectionContainer+"[data-index='1']")}else pos=-1*100*index;if(current.removeClass("active"),next.addClass("active"),1==d.pagination&&(a(".onepage-pagination li a[data-index='"+index+"']").removeClass("active"),a(".onepage-pagination li a[data-index='"+next.data("index")+"']").addClass("active")),a("body")[0].className=a("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,""),a("body").addClass("viewing-page-"+next.data("index")),history.replaceState&&1==d.updateURL){var c=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(index+1);history.pushState({},document.title,c)}b.transformPage(d,pos,next.data("index"),next)},a.fn.moveUp=function(){var b=a(this);if(index=a(d.sectionContainer+".active").data("index"),current=a(d.sectionContainer+"[data-index='"+index+"']"),next=a(d.sectionContainer+"[data-index='"+(index-1)+"']"),next.length<1){if(1!=d.loop)return;pos=-1*100*(total-1),next=a(d.sectionContainer+"[data-index='"+total+"']")}else pos=-1*100*(next.data("index")-1);if(current.removeClass("active"),next.addClass("active"),1==d.pagination&&(a(".onepage-pagination li a[data-index='"+index+"']").removeClass("active"),a(".onepage-pagination li a[data-index='"+next.data("index")+"']").addClass("active")),a("body")[0].className=a("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,""),a("body").addClass("viewing-page-"+next.data("index")),history.replaceState&&1==d.updateURL){var c=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(index-1);history.pushState({},document.title,c)}b.transformPage(d,pos,next.data("index"),next)},a.fn.moveTo=function(b){if(current=a(d.sectionContainer+".active"),next=a(d.sectionContainer+"[data-index='"+b+"']"),next.length>0){if(current.removeClass("active"),next.addClass("active"),a(".onepage-pagination li a.active").removeClass("active"),a(".onepage-pagination li a[data-index='"+b+"']").addClass("active"),a("body")[0].className=a("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,""),a("body").addClass("viewing-page-"+next.data("index")),pos=-1*100*(b-1),history.replaceState&&1==d.updateURL){var c=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(b-1);history.pushState({},document.title,c)}e.transformPage(d,pos,b,next)}},e.addClass("onepage-wrapper").css("position","relative"),a.each(f,function(b){a(this).addClass("ops-section").attr("data-index",b+1),topPos+=100,1==d.pagination&&(paginationList+="
    • ")}),e.swipeEvents().bind("swipeDown",function(b){a("body").hasClass("disabled-onepage-scroll")||b.preventDefault(),e.moveUp()}).bind("swipeUp",function(b){a("body").hasClass("disabled-onepage-scroll")||b.preventDefault(),e.moveDown()}),1==d.pagination&&(a("").prependTo("body"),posTop=-1*(e.find(".onepage-pagination").height()/2),e.find(".onepage-pagination").css("margin-top",posTop)),""!=window.location.hash&&"#1"!=window.location.hash){if(init_index=window.location.hash.replace("#",""),a(d.sectionContainer+"[data-index='"+init_index+"']").addClass("active"),a("body").addClass("viewing-page-"+init_index),1==d.pagination&&a(".onepage-pagination li a[data-index='"+init_index+"']").addClass("active"),next=a(d.sectionContainer+"[data-index='"+init_index+"']"),next&&(next.addClass("active"),1==d.pagination&&a(".onepage-pagination li a[data-index='"+init_index+"']").addClass("active"),a("body")[0].className=a("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,""),a("body").addClass("viewing-page-"+next.data("index")),history.replaceState&&1==d.updateURL)){var i=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,i)}pos=-1*100*(init_index-1),e.transformPage(d,pos,init_index)}else a(d.sectionContainer+"[data-index='1']").addClass("active"),a("body").addClass("viewing-page-1"),1==d.pagination&&a(".onepage-pagination li a[data-index='1']").addClass("active");return 1==d.pagination&&a(".onepage-pagination li a").click(function(){var b=a(this).data("index");e.moveTo(b)}),a(document).bind("mousewheel DOMMouseScroll",function(b){b.preventDefault();var c=b.originalEvent.wheelDelta||-b.originalEvent.detail;a("body").hasClass("disabled-onepage-scroll")||h(b,c)}),0!=d.responsiveFallback&&(a(window).resize(function(){g()}),g()),1==d.keyboard&&a(document).keydown(function(b){var c=b.target.tagName.toLowerCase();if(!a("body").hasClass("disabled-onepage-scroll"))switch(b.which){case 38:"input"!=c&&"textarea"!=c&&e.moveUp();break;case 40:"input"!=c&&"textarea"!=c&&e.moveDown();break;default:return}}),!1}}); \ No newline at end of file +!function(e){var t={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:true,responsiveFallback:false,direction:"vertical"};e.fn.swipeEvents=function(){return this.each(function(){function i(e){var i=e.originalEvent.touches;if(i&&i.length){t=i[0].pageX;n=i[0].pageY;r.bind("touchmove",s)}}function s(e){var i=e.originalEvent.touches;if(i&&i.length){var o=t-i[0].pageX;var u=n-i[0].pageY;if(o>=50){r.trigger("swipeLeft")}if(o<=-50){r.trigger("swipeRight")}if(u>=50){r.trigger("swipeUp")}if(u<=-50){r.trigger("swipeDown")}if(Math.abs(o)>=50||Math.abs(u)>=50){r.unbind("touchmove",s)}}}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.onepage_scroll=function(n){function o(){var t=false;var n=typeof r.responsiveFallback;if(n=="number"){t=e(window).width()0){if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));current.removeClass("active");next.addClass("active");e(".onepage-pagination li a"+".active").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));pos=(t-1)*100*-1;if(history.replaceState&&r.updateURL==true){var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(t-1);history.pushState({},document.title,n)}i.transformPage(r,pos,t)}};i.addClass("onepage-wrapper").css("position","relative");e.each(s,function(t){e(this).css({position:"absolute",top:topPos+"%"}).addClass("section").attr("data-index",t+1);e(this).css({position:"absolute",left:r.direction=="horizontal"?leftPos+"%":0,top:r.direction=="vertical"||r.direction!="horizontal"?topPos+"%":0});if(r.direction=="horizontal")leftPos=leftPos+100;else topPos=topPos+100;if(r.pagination==true){paginationList+="
    • "}});i.swipeEvents().bind("swipeDown",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveUp()}).bind("swipeUp",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveDown()});if(r.pagination==true){if(e("ul.onepage-pagination").length<1)e("
      ").prependTo("body");if(r.direction=="horizontal"){posLeft=i.find(".onepage-pagination").width()/2*-1;i.find(".onepage-pagination").css("margin-left",posLeft)}else{posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}e("ul.onepage-pagination").html(paginationList)}if(window.location.hash!=""&&window.location.hash!="#1"){init_index=window.location.hash.replace("#","");if(parseInt(init_index)<=total&&parseInt(init_index)>0){e(r.sectionContainer+"[data-index='"+init_index+"']").addClass("active");e("body").addClass("viewing-page-"+init_index);if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");next=e(r.sectionContainer+"[data-index='"+init_index+"']");if(next){next.addClass("active");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));if(history.replaceState&&r.updateURL==true){var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,a)}}pos=(init_index-1)*100*-1;i.transformPage(r,pos,init_index)}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}if(r.pagination==true){e(".onepage-pagination li a").click(function(){var t=e(this).data("index");i.moveTo(t)})}e(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(t){t.preventDefault();var n=t.originalEvent.wheelDelta||-t.originalEvent.detail;if(!e("body").hasClass("disabled-onepage-scroll"))u(t,n)});if(r.responsiveFallback!=false){e(window).resize(function(){o()});o()}if(r.keyboard==true){e(document).keydown(function(t){var n=t.target.tagName.toLowerCase();if(!e("body").hasClass("disabled-onepage-scroll")){switch(t.which){case 38:if(n!="input"&&n!="textarea")i.moveUp();break;case 40:if(n!="input"&&n!="textarea")i.moveDown();break;case 33:if(n!="input"&&n!="textarea")i.moveUp();break;case 34:if(n!="input"&&n!="textarea")i.moveDown();break;case 36:i.moveTo(1);break;case 35:i.moveTo(total);break;default:return}}})}return false}}(window.jQuery) \ No newline at end of file diff --git a/onepage-scroll.css b/onepage-scroll.css index e1076ab..3d4415f 100644 --- a/onepage-scroll.css +++ b/onepage-scroll.css @@ -23,10 +23,9 @@ body, .onepage-wrapper, html { -webkit-transform-style: preserve-3d; } -.onepage-wrapper .ops-section { +.onepage-wrapper .section { width: 100%; height: 100%; - position: relative; } .onepage-pagination { @@ -73,9 +72,10 @@ body, .onepage-wrapper, html { overflow: auto; } -.disabled-onepage-scroll .onepage-wrapper .ops-section { +.disabled-onepage-scroll .onepage-wrapper .section { position: relative !important; top: auto !important; + left: auto !important; } .disabled-onepage-scroll .onepage-wrapper { -webkit-transform: none !important;