36 | ...
37 | ...
38 | ...
39 |
40 | ...
41 |
42 | ````
43 | Container "Main" must be one level below the `body` tag in order to make it work full page. Now call the function to activate as follows:
44 |
45 | ````javascript
46 | Zepto(".main").onePageScroll({
47 | sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
48 | easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
49 | // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
50 | animationTime: 1000, // AnimationTime let you define how long each section takes to animate
51 | pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
52 | updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
53 | beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
54 | afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
55 | 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.
56 | keyboard: true, // You can activate the keyboard controls
57 | responsiveFallback: false // You can fallback to normal page scroll by defining the width of the browser in which
58 | // you want the responsive fallback to be triggered. For example, set this to 600 and whenever
59 | // the browser's width is less than 600, the fallback will kick in.
60 | });
61 | ````
62 | 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.
63 |
64 | ## Public Methods
65 | You can also trigger page move programmatically as well:
66 |
67 | ### Zepto.fn.moveUp()
68 | This method allows you to move the page up by one. This action is equivalent to scrolling up/swiping down.
69 |
70 | ````javascript
71 | Zepto(".main").moveUp();
72 | ````
73 |
74 | ### Zepto.fn.moveDown()
75 | This method allows you to move the page down by one. This action is equivalent to scrolling down/swiping up.
76 |
77 | ````javascript
78 | Zepto(".main").moveDown();
79 | ````
80 |
81 | ### Zepto.fn.moveTo(page_index)
82 | This method allows you to move to the specified page index programatically.
83 |
84 | ````javascript
85 | Zepto(".main").moveTo(3);
86 | ````
87 |
88 | ## Callbacks
89 | You can use callbacks to perform actions before or after the page move.
90 |
91 | ### beforeMove(next_page_index, next_section_element)
92 | This callback gets called before the plugin performs its move.
93 |
94 | ````javascript
95 | Zepto(".main").onepage_scroll({
96 | beforeMove: function(index, next_el) {
97 | ...
98 | }
99 | });
100 | ````
101 |
102 | ### afterMove(next_page_index, next_section_element)
103 | This callback gets called after the move animation was performed.
104 |
105 | ````javascript
106 | Zepto(".main").onepage_scroll({
107 | afterMove: function(index, next_el) {
108 | ...
109 | }
110 | });
111 | ````
112 |
113 | 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).
114 |
115 | ## Other Resources
116 | - [Pure JS Version](http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html)
117 | - [jQuery Version](http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
118 | - [OnePageScroll.js: Creating an Apple’s iPhone 5S Website](http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/)
119 | - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js)
120 | - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/)
121 |
--------------------------------------------------------------------------------
/demo/back-phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peachananr/zepto-onepage-scroll/cda4bd802fdd202d6bf88a471cac0fa963fb2222/demo/back-phone.png
--------------------------------------------------------------------------------
/demo/onepage-scroll.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin: 0;
3 | overflow: hidden;
4 | -webkit-transition: opacity 400ms;
5 | -moz-transition: opacity 400ms;
6 | transition: opacity 400ms;
7 | }
8 |
9 | body, .onepage-wrapper, html {
10 | display: block;
11 | position: static;
12 | padding: 0;
13 | width: 100%;
14 | height: 100%;
15 | }
16 |
17 | .onepage-wrapper {
18 | width: 100%;
19 | height: 100%;
20 | display: block;
21 | position: relative;
22 | padding: 0;
23 | -webkit-transform-style: preserve-3d;
24 | }
25 |
26 | .onepage-wrapper .ops-section {
27 | width: 100%;
28 | height: 100%;
29 | position: relative;
30 | }
31 |
32 | .onepage-pagination {
33 | position: absolute;
34 | right: 10px;
35 | top: 50%;
36 | z-index: 5;
37 | list-style: none;
38 | margin: 0;
39 | padding: 0;
40 | }
41 | .onepage-pagination li {
42 | padding: 0;
43 | text-align: center;
44 | }
45 | .onepage-pagination li a{
46 | padding: 10px;
47 | width: 4px;
48 | height: 4px;
49 | display: block;
50 |
51 | }
52 | .onepage-pagination li a:before{
53 | content: '';
54 | position: absolute;
55 | width: 4px;
56 | height: 4px;
57 | background: rgba(0,0,0,0.85);
58 | border-radius: 10px;
59 | -webkit-border-radius: 10px;
60 | -moz-border-radius: 10px;
61 | }
62 |
63 | .onepage-pagination li a.active:before{
64 | width: 10px;
65 | height: 10px;
66 | background: none;
67 | border: 1px solid black;
68 | margin-top: -4px;
69 | left: 8px;
70 | }
71 |
72 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
73 | overflow: auto;
74 | }
75 |
76 | .disabled-onepage-scroll .onepage-wrapper .ops-section {
77 | position: relative !important;
78 | top: auto !important;
79 | }
80 | .disabled-onepage-scroll .onepage-wrapper {
81 | -webkit-transform: none !important;
82 | -moz-transform: none !important;
83 | transform: none !important;
84 | -ms-transform: none !important;
85 | min-height: 100%;
86 | }
87 |
88 |
89 | .disabled-onepage-scroll .onepage-pagination {
90 | display: none;
91 | }
92 |
93 | body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
94 | position: inherit;
95 | }
--------------------------------------------------------------------------------
/demo/phones.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peachananr/zepto-onepage-scroll/cda4bd802fdd202d6bf88a471cac0fa963fb2222/demo/phones.png
--------------------------------------------------------------------------------
/demo/tilted-phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peachananr/zepto-onepage-scroll/cda4bd802fdd202d6bf88a471cac0fa963fb2222/demo/tilted-phone.png
--------------------------------------------------------------------------------
/demo/zepto.js:
--------------------------------------------------------------------------------
1 | /* Zepto v1.1.3 - zepto event ajax form ie - zeptojs.com/license */
2 |
3 |
4 | var Zepto = (function() {
5 | var undefined, key, $, classList, emptyArray = [], slice = emptyArray.slice, filter = emptyArray.filter,
6 | document = window.document,
7 | elementDisplay = {}, classCache = {},
8 | cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 },
9 | fragmentRE = /^\s*<(\w+|!)[^>]*>/,
10 | singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
11 | tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
12 | rootNodeRE = /^(?:body|html)$/i,
13 | capitalRE = /([A-Z])/g,
14 |
15 | // special attributes that should be get/set via method calls
16 | methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'],
17 |
18 | adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],
19 | table = document.createElement('table'),
20 | tableRow = document.createElement('tr'),
21 | containers = {
22 | 'tr': document.createElement('tbody'),
23 | 'tbody': table, 'thead': table, 'tfoot': table,
24 | 'td': tableRow, 'th': tableRow,
25 | '*': document.createElement('div')
26 | },
27 | readyRE = /complete|loaded|interactive/,
28 | simpleSelectorRE = /^[\w-]*$/,
29 | class2type = {},
30 | toString = class2type.toString,
31 | zepto = {},
32 | camelize, uniq,
33 | tempParent = document.createElement('div'),
34 | propMap = {
35 | 'tabindex': 'tabIndex',
36 | 'readonly': 'readOnly',
37 | 'for': 'htmlFor',
38 | 'class': 'className',
39 | 'maxlength': 'maxLength',
40 | 'cellspacing': 'cellSpacing',
41 | 'cellpadding': 'cellPadding',
42 | 'rowspan': 'rowSpan',
43 | 'colspan': 'colSpan',
44 | 'usemap': 'useMap',
45 | 'frameborder': 'frameBorder',
46 | 'contenteditable': 'contentEditable'
47 | },
48 | isArray = Array.isArray ||
49 | function(object){ return object instanceof Array }
50 |
51 | zepto.matches = function(element, selector) {
52 | if (!selector || !element || element.nodeType !== 1) return false
53 | var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector ||
54 | element.oMatchesSelector || element.matchesSelector
55 | if (matchesSelector) return matchesSelector.call(element, selector)
56 | // fall back to performing a selector:
57 | var match, parent = element.parentNode, temp = !parent
58 | if (temp) (parent = tempParent).appendChild(element)
59 | match = ~zepto.qsa(parent, selector).indexOf(element)
60 | temp && tempParent.removeChild(element)
61 | return match
62 | }
63 |
64 | function type(obj) {
65 | return obj == null ? String(obj) :
66 | class2type[toString.call(obj)] || "object"
67 | }
68 |
69 | function isFunction(value) { return type(value) == "function" }
70 | function isWindow(obj) { return obj != null && obj == obj.window }
71 | function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
72 | function isObject(obj) { return type(obj) == "object" }
73 | function isPlainObject(obj) {
74 | return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
75 | }
76 | function likeArray(obj) { return typeof obj.length == 'number' }
77 |
78 | function compact(array) { return filter.call(array, function(item){ return item != null }) }
79 | function flatten(array) { return array.length > 0 ? $.fn.concat.apply([], array) : array }
80 | camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }
81 | function dasherize(str) {
82 | return str.replace(/::/g, '/')
83 | .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
84 | .replace(/([a-z\d])([A-Z])/g, '$1_$2')
85 | .replace(/_/g, '-')
86 | .toLowerCase()
87 | }
88 | uniq = function(array){ return filter.call(array, function(item, idx){ return array.indexOf(item) == idx }) }
89 |
90 | function classRE(name) {
91 | return name in classCache ?
92 | classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)'))
93 | }
94 |
95 | function maybeAddPx(name, value) {
96 | return (typeof value == "number" && !cssNumber[dasherize(name)]) ? value + "px" : value
97 | }
98 |
99 | function defaultDisplay(nodeName) {
100 | var element, display
101 | if (!elementDisplay[nodeName]) {
102 | element = document.createElement(nodeName)
103 | document.body.appendChild(element)
104 | display = getComputedStyle(element, '').getPropertyValue("display")
105 | element.parentNode.removeChild(element)
106 | display == "none" && (display = "block")
107 | elementDisplay[nodeName] = display
108 | }
109 | return elementDisplay[nodeName]
110 | }
111 |
112 | function children(element) {
113 | return 'children' in element ?
114 | slice.call(element.children) :
115 | $.map(element.childNodes, function(node){ if (node.nodeType == 1) return node })
116 | }
117 |
118 | // `$.zepto.fragment` takes a html string and an optional tag name
119 | // to generate DOM nodes nodes from the given html string.
120 | // The generated DOM nodes are returned as an array.
121 | // This function can be overriden in plugins for example to make
122 | // it compatible with browsers that don't support the DOM fully.
123 | zepto.fragment = function(html, name, properties) {
124 | var dom, nodes, container
125 |
126 | // A special case optimization for a single tag
127 | if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))
128 |
129 | if (!dom) {
130 | if (html.replace) html = html.replace(tagExpanderRE, "<$1>")
131 | if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
132 | if (!(name in containers)) name = '*'
133 |
134 | container = containers[name]
135 | container.innerHTML = '' + html
136 | dom = $.each(slice.call(container.childNodes), function(){
137 | container.removeChild(this)
138 | })
139 | }
140 |
141 | if (isPlainObject(properties)) {
142 | nodes = $(dom)
143 | $.each(properties, function(key, value) {
144 | if (methodAttributes.indexOf(key) > -1) nodes[key](value)
145 | else nodes.attr(key, value)
146 | })
147 | }
148 |
149 | return dom
150 | }
151 |
152 | // `$.zepto.Z` swaps out the prototype of the given `dom` array
153 | // of nodes with `$.fn` and thus supplying all the Zepto functions
154 | // to the array. Note that `__proto__` is not supported on Internet
155 | // Explorer. This method can be overriden in plugins.
156 | zepto.Z = function(dom, selector) {
157 | dom = dom || []
158 | dom.__proto__ = $.fn
159 | dom.selector = selector || ''
160 | return dom
161 | }
162 |
163 | // `$.zepto.isZ` should return `true` if the given object is a Zepto
164 | // collection. This method can be overriden in plugins.
165 | zepto.isZ = function(object) {
166 | return object instanceof zepto.Z
167 | }
168 |
169 | // `$.zepto.init` is Zepto's counterpart to jQuery's `$.fn.init` and
170 | // takes a CSS selector and an optional context (and handles various
171 | // special cases).
172 | // This method can be overriden in plugins.
173 | zepto.init = function(selector, context) {
174 | var dom
175 | // If nothing given, return an empty Zepto collection
176 | if (!selector) return zepto.Z()
177 | // Optimize for string selectors
178 | else if (typeof selector == 'string') {
179 | selector = selector.trim()
180 | // If it's a html fragment, create nodes from it
181 | // Note: In both Chrome 21 and Firefox 15, DOM error 12
182 | // is thrown if the fragment doesn't begin with <
183 | if (selector[0] == '<' && fragmentRE.test(selector))
184 | dom = zepto.fragment(selector, RegExp.$1, context), selector = null
185 | // If there's a context, create a collection on that context first, and select
186 | // nodes from there
187 | else if (context !== undefined) return $(context).find(selector)
188 | // If it's a CSS selector, use it to select nodes.
189 | else dom = zepto.qsa(document, selector)
190 | }
191 | // If a function is given, call it when the DOM is ready
192 | else if (isFunction(selector)) return $(document).ready(selector)
193 | // If a Zepto collection is given, just return it
194 | else if (zepto.isZ(selector)) return selector
195 | else {
196 | // normalize array if an array of nodes is given
197 | if (isArray(selector)) dom = compact(selector)
198 | // Wrap DOM nodes.
199 | else if (isObject(selector))
200 | dom = [selector], selector = null
201 | // If it's a html fragment, create nodes from it
202 | else if (fragmentRE.test(selector))
203 | dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
204 | // If there's a context, create a collection on that context first, and select
205 | // nodes from there
206 | else if (context !== undefined) return $(context).find(selector)
207 | // And last but no least, if it's a CSS selector, use it to select nodes.
208 | else dom = zepto.qsa(document, selector)
209 | }
210 | // create a new Zepto collection from the nodes found
211 | return zepto.Z(dom, selector)
212 | }
213 |
214 | // `$` will be the base `Zepto` object. When calling this
215 | // function just call `$.zepto.init, which makes the implementation
216 | // details of selecting nodes and creating Zepto collections
217 | // patchable in plugins.
218 | $ = function(selector, context){
219 | return zepto.init(selector, context)
220 | }
221 |
222 | function extend(target, source, deep) {
223 | for (key in source)
224 | if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
225 | if (isPlainObject(source[key]) && !isPlainObject(target[key]))
226 | target[key] = {}
227 | if (isArray(source[key]) && !isArray(target[key]))
228 | target[key] = []
229 | extend(target[key], source[key], deep)
230 | }
231 | else if (source[key] !== undefined) target[key] = source[key]
232 | }
233 |
234 | // Copy all but undefined properties from one or more
235 | // objects to the `target` object.
236 | $.extend = function(target){
237 | var deep, args = slice.call(arguments, 1)
238 | if (typeof target == 'boolean') {
239 | deep = target
240 | target = args.shift()
241 | }
242 | args.forEach(function(arg){ extend(target, arg, deep) })
243 | return target
244 | }
245 |
246 | // `$.zepto.qsa` is Zepto's CSS selector implementation which
247 | // uses `document.querySelectorAll` and optimizes for some special cases, like `#id`.
248 | // This method can be overriden in plugins.
249 | zepto.qsa = function(element, selector){
250 | var found,
251 | maybeID = selector[0] == '#',
252 | maybeClass = !maybeID && selector[0] == '.',
253 | nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked
254 | isSimple = simpleSelectorRE.test(nameOnly)
255 | return (isDocument(element) && isSimple && maybeID) ?
256 | ( (found = element.getElementById(nameOnly)) ? [found] : [] ) :
257 | (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
258 | slice.call(
259 | isSimple && !maybeID ?
260 | maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class
261 | element.getElementsByTagName(selector) : // Or a tag
262 | element.querySelectorAll(selector) // Or it's not simple, and we need to query all
263 | )
264 | }
265 |
266 | function filtered(nodes, selector) {
267 | return selector == null ? $(nodes) : $(nodes).filter(selector)
268 | }
269 |
270 | $.contains = function(parent, node) {
271 | return parent !== node && parent.contains(node)
272 | }
273 |
274 | function funcArg(context, arg, idx, payload) {
275 | return isFunction(arg) ? arg.call(context, idx, payload) : arg
276 | }
277 |
278 | function setAttribute(node, name, value) {
279 | value == null ? node.removeAttribute(name) : node.setAttribute(name, value)
280 | }
281 |
282 | // access className property while respecting SVGAnimatedString
283 | function className(node, value){
284 | var klass = node.className,
285 | svg = klass && klass.baseVal !== undefined
286 |
287 | if (value === undefined) return svg ? klass.baseVal : klass
288 | svg ? (klass.baseVal = value) : (node.className = value)
289 | }
290 |
291 | // "true" => true
292 | // "false" => false
293 | // "null" => null
294 | // "42" => 42
295 | // "42.5" => 42.5
296 | // "08" => "08"
297 | // JSON => parse if valid
298 | // String => self
299 | function deserializeValue(value) {
300 | var num
301 | try {
302 | return value ?
303 | value == "true" ||
304 | ( value == "false" ? false :
305 | value == "null" ? null :
306 | !/^0/.test(value) && !isNaN(num = Number(value)) ? num :
307 | /^[\[\{]/.test(value) ? $.parseJSON(value) :
308 | value )
309 | : value
310 | } catch(e) {
311 | return value
312 | }
313 | }
314 |
315 | $.type = type
316 | $.isFunction = isFunction
317 | $.isWindow = isWindow
318 | $.isArray = isArray
319 | $.isPlainObject = isPlainObject
320 |
321 | $.isEmptyObject = function(obj) {
322 | var name
323 | for (name in obj) return false
324 | return true
325 | }
326 |
327 | $.inArray = function(elem, array, i){
328 | return emptyArray.indexOf.call(array, elem, i)
329 | }
330 |
331 | $.camelCase = camelize
332 | $.trim = function(str) {
333 | return str == null ? "" : String.prototype.trim.call(str)
334 | }
335 |
336 | // plugin compatibility
337 | $.uuid = 0
338 | $.support = { }
339 | $.expr = { }
340 |
341 | $.map = function(elements, callback){
342 | var value, values = [], i, key
343 | if (likeArray(elements))
344 | for (i = 0; i < elements.length; i++) {
345 | value = callback(elements[i], i)
346 | if (value != null) values.push(value)
347 | }
348 | else
349 | for (key in elements) {
350 | value = callback(elements[key], key)
351 | if (value != null) values.push(value)
352 | }
353 | return flatten(values)
354 | }
355 |
356 | $.each = function(elements, callback){
357 | var i, key
358 | if (likeArray(elements)) {
359 | for (i = 0; i < elements.length; i++)
360 | if (callback.call(elements[i], i, elements[i]) === false) return elements
361 | } else {
362 | for (key in elements)
363 | if (callback.call(elements[key], key, elements[key]) === false) return elements
364 | }
365 |
366 | return elements
367 | }
368 |
369 | $.grep = function(elements, callback){
370 | return filter.call(elements, callback)
371 | }
372 |
373 | if (window.JSON) $.parseJSON = JSON.parse
374 |
375 | // Populate the class2type map
376 | $.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
377 | class2type[ "[object " + name + "]" ] = name.toLowerCase()
378 | })
379 |
380 | // Define methods that will be available on all
381 | // Zepto collections
382 | $.fn = {
383 | // Because a collection acts like an array
384 | // copy over these useful array functions.
385 | forEach: emptyArray.forEach,
386 | reduce: emptyArray.reduce,
387 | push: emptyArray.push,
388 | sort: emptyArray.sort,
389 | indexOf: emptyArray.indexOf,
390 | concat: emptyArray.concat,
391 |
392 | // `map` and `slice` in the jQuery API work differently
393 | // from their array counterparts
394 | map: function(fn){
395 | return $($.map(this, function(el, i){ return fn.call(el, i, el) }))
396 | },
397 | slice: function(){
398 | return $(slice.apply(this, arguments))
399 | },
400 |
401 | ready: function(callback){
402 | // need to check if document.body exists for IE as that browser reports
403 | // document ready when it hasn't yet created the body element
404 | if (readyRE.test(document.readyState) && document.body) callback($)
405 | else document.addEventListener('DOMContentLoaded', function(){ callback($) }, false)
406 | return this
407 | },
408 | get: function(idx){
409 | return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]
410 | },
411 | toArray: function(){ return this.get() },
412 | size: function(){
413 | return this.length
414 | },
415 | remove: function(){
416 | return this.each(function(){
417 | if (this.parentNode != null)
418 | this.parentNode.removeChild(this)
419 | })
420 | },
421 | each: function(callback){
422 | emptyArray.every.call(this, function(el, idx){
423 | return callback.call(el, idx, el) !== false
424 | })
425 | return this
426 | },
427 | filter: function(selector){
428 | if (isFunction(selector)) return this.not(this.not(selector))
429 | return $(filter.call(this, function(element){
430 | return zepto.matches(element, selector)
431 | }))
432 | },
433 | add: function(selector,context){
434 | return $(uniq(this.concat($(selector,context))))
435 | },
436 | is: function(selector){
437 | return this.length > 0 && zepto.matches(this[0], selector)
438 | },
439 | not: function(selector){
440 | var nodes=[]
441 | if (isFunction(selector) && selector.call !== undefined)
442 | this.each(function(idx){
443 | if (!selector.call(this,idx)) nodes.push(this)
444 | })
445 | else {
446 | var excludes = typeof selector == 'string' ? this.filter(selector) :
447 | (likeArray(selector) && isFunction(selector.item)) ? slice.call(selector) : $(selector)
448 | this.forEach(function(el){
449 | if (excludes.indexOf(el) < 0) nodes.push(el)
450 | })
451 | }
452 | return $(nodes)
453 | },
454 | has: function(selector){
455 | return this.filter(function(){
456 | return isObject(selector) ?
457 | $.contains(this, selector) :
458 | $(this).find(selector).size()
459 | })
460 | },
461 | eq: function(idx){
462 | return idx === -1 ? this.slice(idx) : this.slice(idx, + idx + 1)
463 | },
464 | first: function(){
465 | var el = this[0]
466 | return el && !isObject(el) ? el : $(el)
467 | },
468 | last: function(){
469 | var el = this[this.length - 1]
470 | return el && !isObject(el) ? el : $(el)
471 | },
472 | find: function(selector){
473 | var result, $this = this
474 | if (typeof selector == 'object')
475 | result = $(selector).filter(function(){
476 | var node = this
477 | return emptyArray.some.call($this, function(parent){
478 | return $.contains(parent, node)
479 | })
480 | })
481 | else if (this.length == 1) result = $(zepto.qsa(this[0], selector))
482 | else result = this.map(function(){ return zepto.qsa(this, selector) })
483 | return result
484 | },
485 | closest: function(selector, context){
486 | var node = this[0], collection = false
487 | if (typeof selector == 'object') collection = $(selector)
488 | while (node && !(collection ? collection.indexOf(node) >= 0 : zepto.matches(node, selector)))
489 | node = node !== context && !isDocument(node) && node.parentNode
490 | return $(node)
491 | },
492 | parents: function(selector){
493 | var ancestors = [], nodes = this
494 | while (nodes.length > 0)
495 | nodes = $.map(nodes, function(node){
496 | if ((node = node.parentNode) && !isDocument(node) && ancestors.indexOf(node) < 0) {
497 | ancestors.push(node)
498 | return node
499 | }
500 | })
501 | return filtered(ancestors, selector)
502 | },
503 | parent: function(selector){
504 | return filtered(uniq(this.pluck('parentNode')), selector)
505 | },
506 | children: function(selector){
507 | return filtered(this.map(function(){ return children(this) }), selector)
508 | },
509 | contents: function() {
510 | return this.map(function() { return slice.call(this.childNodes) })
511 | },
512 | siblings: function(selector){
513 | return filtered(this.map(function(i, el){
514 | return filter.call(children(el.parentNode), function(child){ return child!==el })
515 | }), selector)
516 | },
517 | empty: function(){
518 | return this.each(function(){ this.innerHTML = '' })
519 | },
520 | // `pluck` is borrowed from Prototype.js
521 | pluck: function(property){
522 | return $.map(this, function(el){ return el[property] })
523 | },
524 | show: function(){
525 | return this.each(function(){
526 | this.style.display == "none" && (this.style.display = '')
527 | if (getComputedStyle(this, '').getPropertyValue("display") == "none")
528 | this.style.display = defaultDisplay(this.nodeName)
529 | })
530 | },
531 | replaceWith: function(newContent){
532 | return this.before(newContent).remove()
533 | },
534 | wrap: function(structure){
535 | var func = isFunction(structure)
536 | if (this[0] && !func)
537 | var dom = $(structure).get(0),
538 | clone = dom.parentNode || this.length > 1
539 |
540 | return this.each(function(index){
541 | $(this).wrapAll(
542 | func ? structure.call(this, index) :
543 | clone ? dom.cloneNode(true) : dom
544 | )
545 | })
546 | },
547 | wrapAll: function(structure){
548 | if (this[0]) {
549 | $(this[0]).before(structure = $(structure))
550 | var children
551 | // drill down to the inmost element
552 | while ((children = structure.children()).length) structure = children.first()
553 | $(structure).append(this)
554 | }
555 | return this
556 | },
557 | wrapInner: function(structure){
558 | var func = isFunction(structure)
559 | return this.each(function(index){
560 | var self = $(this), contents = self.contents(),
561 | dom = func ? structure.call(this, index) : structure
562 | contents.length ? contents.wrapAll(dom) : self.append(dom)
563 | })
564 | },
565 | unwrap: function(){
566 | this.parent().each(function(){
567 | $(this).replaceWith($(this).children())
568 | })
569 | return this
570 | },
571 | clone: function(){
572 | return this.map(function(){ return this.cloneNode(true) })
573 | },
574 | hide: function(){
575 | return this.css("display", "none")
576 | },
577 | toggle: function(setting){
578 | return this.each(function(){
579 | var el = $(this)
580 | ;(setting === undefined ? el.css("display") == "none" : setting) ? el.show() : el.hide()
581 | })
582 | },
583 | prev: function(selector){ return $(this.pluck('previousElementSibling')).filter(selector || '*') },
584 | next: function(selector){ return $(this.pluck('nextElementSibling')).filter(selector || '*') },
585 | html: function(html){
586 | return arguments.length === 0 ?
587 | (this.length > 0 ? this[0].innerHTML : null) :
588 | this.each(function(idx){
589 | var originHtml = this.innerHTML
590 | $(this).empty().append( funcArg(this, html, idx, originHtml) )
591 | })
592 | },
593 | text: function(text){
594 | return arguments.length === 0 ?
595 | (this.length > 0 ? this[0].textContent : null) :
596 | this.each(function(){ this.textContent = (text === undefined) ? '' : ''+text })
597 | },
598 | attr: function(name, value){
599 | var result
600 | return (typeof name == 'string' && value === undefined) ?
601 | (this.length == 0 || this[0].nodeType !== 1 ? undefined :
602 | (name == 'value' && this[0].nodeName == 'INPUT') ? this.val() :
603 | (!(result = this[0].getAttribute(name)) && name in this[0]) ? this[0][name] : result
604 | ) :
605 | this.each(function(idx){
606 | if (this.nodeType !== 1) return
607 | if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
608 | else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
609 | })
610 | },
611 | removeAttr: function(name){
612 | return this.each(function(){ this.nodeType === 1 && setAttribute(this, name) })
613 | },
614 | prop: function(name, value){
615 | name = propMap[name] || name
616 | return (value === undefined) ?
617 | (this[0] && this[0][name]) :
618 | this.each(function(idx){
619 | this[name] = funcArg(this, value, idx, this[name])
620 | })
621 | },
622 | data: function(name, value){
623 | var data = this.attr('data-' + name.replace(capitalRE, '-$1').toLowerCase(), value)
624 | return data !== null ? deserializeValue(data) : undefined
625 | },
626 | val: function(value){
627 | return arguments.length === 0 ?
628 | (this[0] && (this[0].multiple ?
629 | $(this[0]).find('option').filter(function(){ return this.selected }).pluck('value') :
630 | this[0].value)
631 | ) :
632 | this.each(function(idx){
633 | this.value = funcArg(this, value, idx, this.value)
634 | })
635 | },
636 | offset: function(coordinates){
637 | if (coordinates) return this.each(function(index){
638 | var $this = $(this),
639 | coords = funcArg(this, coordinates, index, $this.offset()),
640 | parentOffset = $this.offsetParent().offset(),
641 | props = {
642 | top: coords.top - parentOffset.top,
643 | left: coords.left - parentOffset.left
644 | }
645 |
646 | if ($this.css('position') == 'static') props['position'] = 'relative'
647 | $this.css(props)
648 | })
649 | if (this.length==0) return null
650 | var obj = this[0].getBoundingClientRect()
651 | return {
652 | left: obj.left + window.pageXOffset,
653 | top: obj.top + window.pageYOffset,
654 | width: Math.round(obj.width),
655 | height: Math.round(obj.height)
656 | }
657 | },
658 | css: function(property, value){
659 | if (arguments.length < 2) {
660 | var element = this[0], computedStyle = getComputedStyle(element, '')
661 | if(!element) return
662 | if (typeof property == 'string')
663 | return element.style[camelize(property)] || computedStyle.getPropertyValue(property)
664 | else if (isArray(property)) {
665 | var props = {}
666 | $.each(isArray(property) ? property: [property], function(_, prop){
667 | props[prop] = (element.style[camelize(prop)] || computedStyle.getPropertyValue(prop))
668 | })
669 | return props
670 | }
671 | }
672 |
673 | var css = ''
674 | if (type(property) == 'string') {
675 | if (!value && value !== 0)
676 | this.each(function(){ this.style.removeProperty(dasherize(property)) })
677 | else
678 | css = dasherize(property) + ":" + maybeAddPx(property, value)
679 | } else {
680 | for (key in property)
681 | if (!property[key] && property[key] !== 0)
682 | this.each(function(){ this.style.removeProperty(dasherize(key)) })
683 | else
684 | css += dasherize(key) + ':' + maybeAddPx(key, property[key]) + ';'
685 | }
686 |
687 | return this.each(function(){ this.style.cssText += ';' + css })
688 | },
689 | index: function(element){
690 | return element ? this.indexOf($(element)[0]) : this.parent().children().indexOf(this[0])
691 | },
692 | hasClass: function(name){
693 | if (!name) return false
694 | return emptyArray.some.call(this, function(el){
695 | return this.test(className(el))
696 | }, classRE(name))
697 | },
698 | addClass: function(name){
699 | if (!name) return this
700 | return this.each(function(idx){
701 | classList = []
702 | var cls = className(this), newName = funcArg(this, name, idx, cls)
703 | newName.split(/\s+/g).forEach(function(klass){
704 | if (!$(this).hasClass(klass)) classList.push(klass)
705 | }, this)
706 | classList.length && className(this, cls + (cls ? " " : "") + classList.join(" "))
707 | })
708 | },
709 | removeClass: function(name){
710 | return this.each(function(idx){
711 | if (name === undefined) return className(this, '')
712 | classList = className(this)
713 | funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass){
714 | classList = classList.replace(classRE(klass), " ")
715 | })
716 | className(this, classList.trim())
717 | })
718 | },
719 | toggleClass: function(name, when){
720 | if (!name) return this
721 | return this.each(function(idx){
722 | var $this = $(this), names = funcArg(this, name, idx, className(this))
723 | names.split(/\s+/g).forEach(function(klass){
724 | (when === undefined ? !$this.hasClass(klass) : when) ?
725 | $this.addClass(klass) : $this.removeClass(klass)
726 | })
727 | })
728 | },
729 | scrollTop: function(value){
730 | if (!this.length) return
731 | var hasScrollTop = 'scrollTop' in this[0]
732 | if (value === undefined) return hasScrollTop ? this[0].scrollTop : this[0].pageYOffset
733 | return this.each(hasScrollTop ?
734 | function(){ this.scrollTop = value } :
735 | function(){ this.scrollTo(this.scrollX, value) })
736 | },
737 | scrollLeft: function(value){
738 | if (!this.length) return
739 | var hasScrollLeft = 'scrollLeft' in this[0]
740 | if (value === undefined) return hasScrollLeft ? this[0].scrollLeft : this[0].pageXOffset
741 | return this.each(hasScrollLeft ?
742 | function(){ this.scrollLeft = value } :
743 | function(){ this.scrollTo(value, this.scrollY) })
744 | },
745 | position: function() {
746 | if (!this.length) return
747 |
748 | var elem = this[0],
749 | // Get *real* offsetParent
750 | offsetParent = this.offsetParent(),
751 | // Get correct offsets
752 | offset = this.offset(),
753 | parentOffset = rootNodeRE.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset()
754 |
755 | // Subtract element margins
756 | // note: when an element has margin: auto the offsetLeft and marginLeft
757 | // are the same in Safari causing offset.left to incorrectly be 0
758 | offset.top -= parseFloat( $(elem).css('margin-top') ) || 0
759 | offset.left -= parseFloat( $(elem).css('margin-left') ) || 0
760 |
761 | // Add offsetParent borders
762 | parentOffset.top += parseFloat( $(offsetParent[0]).css('border-top-width') ) || 0
763 | parentOffset.left += parseFloat( $(offsetParent[0]).css('border-left-width') ) || 0
764 |
765 | // Subtract the two offsets
766 | return {
767 | top: offset.top - parentOffset.top,
768 | left: offset.left - parentOffset.left
769 | }
770 | },
771 | offsetParent: function() {
772 | return this.map(function(){
773 | var parent = this.offsetParent || document.body
774 | while (parent && !rootNodeRE.test(parent.nodeName) && $(parent).css("position") == "static")
775 | parent = parent.offsetParent
776 | return parent
777 | })
778 | }
779 | }
780 |
781 | // for now
782 | $.fn.detach = $.fn.remove
783 |
784 | // Generate the `width` and `height` functions
785 | ;['width', 'height'].forEach(function(dimension){
786 | var dimensionProperty =
787 | dimension.replace(/./, function(m){ return m[0].toUpperCase() })
788 |
789 | $.fn[dimension] = function(value){
790 | var offset, el = this[0]
791 | if (value === undefined) return isWindow(el) ? el['inner' + dimensionProperty] :
792 | isDocument(el) ? el.documentElement['scroll' + dimensionProperty] :
793 | (offset = this.offset()) && offset[dimension]
794 | else return this.each(function(idx){
795 | el = $(this)
796 | el.css(dimension, funcArg(this, value, idx, el[dimension]()))
797 | })
798 | }
799 | })
800 |
801 | function traverseNode(node, fun) {
802 | fun(node)
803 | for (var key in node.childNodes) traverseNode(node.childNodes[key], fun)
804 | }
805 |
806 | // Generate the `after`, `prepend`, `before`, `append`,
807 | // `insertAfter`, `insertBefore`, `appendTo`, and `prependTo` methods.
808 | adjacencyOperators.forEach(function(operator, operatorIndex) {
809 | var inside = operatorIndex % 2 //=> prepend, append
810 |
811 | $.fn[operator] = function(){
812 | // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings
813 | var argType, nodes = $.map(arguments, function(arg) {
814 | argType = type(arg)
815 | return argType == "object" || argType == "array" || arg == null ?
816 | arg : zepto.fragment(arg)
817 | }),
818 | parent, copyByClone = this.length > 1
819 | if (nodes.length < 1) return this
820 |
821 | return this.each(function(_, target){
822 | parent = inside ? target : target.parentNode
823 |
824 | // convert all methods to a "before" operation
825 | target = operatorIndex == 0 ? target.nextSibling :
826 | operatorIndex == 1 ? target.firstChild :
827 | operatorIndex == 2 ? target :
828 | null
829 |
830 | nodes.forEach(function(node){
831 | if (copyByClone) node = node.cloneNode(true)
832 | else if (!parent) return $(node).remove()
833 |
834 | traverseNode(parent.insertBefore(node, target), function(el){
835 | if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' &&
836 | (!el.type || el.type === 'text/javascript') && !el.src)
837 | window['eval'].call(window, el.innerHTML)
838 | })
839 | })
840 | })
841 | }
842 |
843 | // after => insertAfter
844 | // prepend => prependTo
845 | // before => insertBefore
846 | // append => appendTo
847 | $.fn[inside ? operator+'To' : 'insert'+(operatorIndex ? 'Before' : 'After')] = function(html){
848 | $(html)[operator](this)
849 | return this
850 | }
851 | })
852 |
853 | zepto.Z.prototype = $.fn
854 |
855 | // Export internal API functions in the `$.zepto` namespace
856 | zepto.uniq = uniq
857 | zepto.deserializeValue = deserializeValue
858 | $.zepto = zepto
859 |
860 | return $
861 | })()
862 |
863 | window.Zepto = Zepto
864 | window.$ === undefined && (window.$ = Zepto)
865 |
866 | ;(function($){
867 | var _zid = 1, undefined,
868 | slice = Array.prototype.slice,
869 | isFunction = $.isFunction,
870 | isString = function(obj){ return typeof obj == 'string' },
871 | handlers = {},
872 | specialEvents={},
873 | focusinSupported = 'onfocusin' in window,
874 | focus = { focus: 'focusin', blur: 'focusout' },
875 | hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' }
876 |
877 | specialEvents.click = specialEvents.mousedown = specialEvents.mouseup = specialEvents.mousemove = 'MouseEvents'
878 |
879 | function zid(element) {
880 | return element._zid || (element._zid = _zid++)
881 | }
882 | function findHandlers(element, event, fn, selector) {
883 | event = parse(event)
884 | if (event.ns) var matcher = matcherFor(event.ns)
885 | return (handlers[zid(element)] || []).filter(function(handler) {
886 | return handler
887 | && (!event.e || handler.e == event.e)
888 | && (!event.ns || matcher.test(handler.ns))
889 | && (!fn || zid(handler.fn) === zid(fn))
890 | && (!selector || handler.sel == selector)
891 | })
892 | }
893 | function parse(event) {
894 | var parts = ('' + event).split('.')
895 | return {e: parts[0], ns: parts.slice(1).sort().join(' ')}
896 | }
897 | function matcherFor(ns) {
898 | return new RegExp('(?:^| )' + ns.replace(' ', ' .* ?') + '(?: |$)')
899 | }
900 |
901 | function eventCapture(handler, captureSetting) {
902 | return handler.del &&
903 | (!focusinSupported && (handler.e in focus)) ||
904 | !!captureSetting
905 | }
906 |
907 | function realEvent(type) {
908 | return hover[type] || (focusinSupported && focus[type]) || type
909 | }
910 |
911 | function add(element, events, fn, data, selector, delegator, capture){
912 | var id = zid(element), set = (handlers[id] || (handlers[id] = []))
913 | events.split(/\s/).forEach(function(event){
914 | if (event == 'ready') return $(document).ready(fn)
915 | var handler = parse(event)
916 | handler.fn = fn
917 | handler.sel = selector
918 | // emulate mouseenter, mouseleave
919 | if (handler.e in hover) fn = function(e){
920 | var related = e.relatedTarget
921 | if (!related || (related !== this && !$.contains(this, related)))
922 | return handler.fn.apply(this, arguments)
923 | }
924 | handler.del = delegator
925 | var callback = delegator || fn
926 | handler.proxy = function(e){
927 | e = compatible(e)
928 | if (e.isImmediatePropagationStopped()) return
929 | e.data = data
930 | var result = callback.apply(element, e._args == undefined ? [e] : [e].concat(e._args))
931 | if (result === false) e.preventDefault(), e.stopPropagation()
932 | return result
933 | }
934 | handler.i = set.length
935 | set.push(handler)
936 | if ('addEventListener' in element)
937 | element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
938 | })
939 | }
940 | function remove(element, events, fn, selector, capture){
941 | var id = zid(element)
942 | ;(events || '').split(/\s/).forEach(function(event){
943 | findHandlers(element, event, fn, selector).forEach(function(handler){
944 | delete handlers[id][handler.i]
945 | if ('removeEventListener' in element)
946 | element.removeEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
947 | })
948 | })
949 | }
950 |
951 | $.event = { add: add, remove: remove }
952 |
953 | $.proxy = function(fn, context) {
954 | if (isFunction(fn)) {
955 | var proxyFn = function(){ return fn.apply(context, arguments) }
956 | proxyFn._zid = zid(fn)
957 | return proxyFn
958 | } else if (isString(context)) {
959 | return $.proxy(fn[context], fn)
960 | } else {
961 | throw new TypeError("expected function")
962 | }
963 | }
964 |
965 | $.fn.bind = function(event, data, callback){
966 | return this.on(event, data, callback)
967 | }
968 | $.fn.unbind = function(event, callback){
969 | return this.off(event, callback)
970 | }
971 | $.fn.one = function(event, selector, data, callback){
972 | return this.on(event, selector, data, callback, 1)
973 | }
974 |
975 | var returnTrue = function(){return true},
976 | returnFalse = function(){return false},
977 | ignoreProperties = /^([A-Z]|returnValue$|layer[XY]$)/,
978 | eventMethods = {
979 | preventDefault: 'isDefaultPrevented',
980 | stopImmediatePropagation: 'isImmediatePropagationStopped',
981 | stopPropagation: 'isPropagationStopped'
982 | }
983 |
984 | function compatible(event, source) {
985 | if (source || !event.isDefaultPrevented) {
986 | source || (source = event)
987 |
988 | $.each(eventMethods, function(name, predicate) {
989 | var sourceMethod = source[name]
990 | event[name] = function(){
991 | this[predicate] = returnTrue
992 | return sourceMethod && sourceMethod.apply(source, arguments)
993 | }
994 | event[predicate] = returnFalse
995 | })
996 |
997 | if (source.defaultPrevented !== undefined ? source.defaultPrevented :
998 | 'returnValue' in source ? source.returnValue === false :
999 | source.getPreventDefault && source.getPreventDefault())
1000 | event.isDefaultPrevented = returnTrue
1001 | }
1002 | return event
1003 | }
1004 |
1005 | function createProxy(event) {
1006 | var key, proxy = { originalEvent: event }
1007 | for (key in event)
1008 | if (!ignoreProperties.test(key) && event[key] !== undefined) proxy[key] = event[key]
1009 |
1010 | return compatible(proxy, event)
1011 | }
1012 |
1013 | $.fn.delegate = function(selector, event, callback){
1014 | return this.on(event, selector, callback)
1015 | }
1016 | $.fn.undelegate = function(selector, event, callback){
1017 | return this.off(event, selector, callback)
1018 | }
1019 |
1020 | $.fn.live = function(event, callback){
1021 | $(document.body).delegate(this.selector, event, callback)
1022 | return this
1023 | }
1024 | $.fn.die = function(event, callback){
1025 | $(document.body).undelegate(this.selector, event, callback)
1026 | return this
1027 | }
1028 |
1029 | $.fn.on = function(event, selector, data, callback, one){
1030 | var autoRemove, delegator, $this = this
1031 | if (event && !isString(event)) {
1032 | $.each(event, function(type, fn){
1033 | $this.on(type, selector, data, fn, one)
1034 | })
1035 | return $this
1036 | }
1037 |
1038 | if (!isString(selector) && !isFunction(callback) && callback !== false)
1039 | callback = data, data = selector, selector = undefined
1040 | if (isFunction(data) || data === false)
1041 | callback = data, data = undefined
1042 |
1043 | if (callback === false) callback = returnFalse
1044 |
1045 | return $this.each(function(_, element){
1046 | if (one) autoRemove = function(e){
1047 | remove(element, e.type, callback)
1048 | return callback.apply(this, arguments)
1049 | }
1050 |
1051 | if (selector) delegator = function(e){
1052 | var evt, match = $(e.target).closest(selector, element).get(0)
1053 | if (match && match !== element) {
1054 | evt = $.extend(createProxy(e), {currentTarget: match, liveFired: element})
1055 | return (autoRemove || callback).apply(match, [evt].concat(slice.call(arguments, 1)))
1056 | }
1057 | }
1058 |
1059 | add(element, event, callback, data, selector, delegator || autoRemove)
1060 | })
1061 | }
1062 | $.fn.off = function(event, selector, callback){
1063 | var $this = this
1064 | if (event && !isString(event)) {
1065 | $.each(event, function(type, fn){
1066 | $this.off(type, selector, fn)
1067 | })
1068 | return $this
1069 | }
1070 |
1071 | if (!isString(selector) && !isFunction(callback) && callback !== false)
1072 | callback = selector, selector = undefined
1073 |
1074 | if (callback === false) callback = returnFalse
1075 |
1076 | return $this.each(function(){
1077 | remove(this, event, callback, selector)
1078 | })
1079 | }
1080 |
1081 | $.fn.trigger = function(event, args){
1082 | event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event)
1083 | event._args = args
1084 | return this.each(function(){
1085 | // items in the collection might not be DOM elements
1086 | if('dispatchEvent' in this) this.dispatchEvent(event)
1087 | else $(this).triggerHandler(event, args)
1088 | })
1089 | }
1090 |
1091 | // triggers event handlers on current element just as if an event occurred,
1092 | // doesn't trigger an actual event, doesn't bubble
1093 | $.fn.triggerHandler = function(event, args){
1094 | var e, result
1095 | this.each(function(i, element){
1096 | e = createProxy(isString(event) ? $.Event(event) : event)
1097 | e._args = args
1098 | e.target = element
1099 | $.each(findHandlers(element, event.type || event), function(i, handler){
1100 | result = handler.proxy(e)
1101 | if (e.isImmediatePropagationStopped()) return false
1102 | })
1103 | })
1104 | return result
1105 | }
1106 |
1107 | // shortcut methods for `.bind(event, fn)` for each event type
1108 | ;('focusin focusout load resize scroll unload click dblclick '+
1109 | 'mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave '+
1110 | 'change select keydown keypress keyup error').split(' ').forEach(function(event) {
1111 | $.fn[event] = function(callback) {
1112 | return callback ?
1113 | this.bind(event, callback) :
1114 | this.trigger(event)
1115 | }
1116 | })
1117 |
1118 | ;['focus', 'blur'].forEach(function(name) {
1119 | $.fn[name] = function(callback) {
1120 | if (callback) this.bind(name, callback)
1121 | else this.each(function(){
1122 | try { this[name]() }
1123 | catch(e) {}
1124 | })
1125 | return this
1126 | }
1127 | })
1128 |
1129 | $.Event = function(type, props) {
1130 | if (!isString(type)) props = type, type = props.type
1131 | var event = document.createEvent(specialEvents[type] || 'Events'), bubbles = true
1132 | if (props) for (var name in props) (name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name])
1133 | event.initEvent(type, bubbles, true)
1134 | return compatible(event)
1135 | }
1136 |
1137 | })(Zepto)
1138 |
1139 | ;(function($){
1140 | var jsonpID = 0,
1141 | document = window.document,
1142 | key,
1143 | name,
1144 | rscript = /').html(response.replace(rscript, "")).find(selector)
1448 | : response)
1449 | callback && callback.apply(self, arguments)
1450 | }
1451 | $.ajax(options)
1452 | return this
1453 | }
1454 |
1455 | var escape = encodeURIComponent
1456 |
1457 | function serialize(params, obj, traditional, scope){
1458 | var type, array = $.isArray(obj), hash = $.isPlainObject(obj)
1459 | $.each(obj, function(key, value) {
1460 | type = $.type(value)
1461 | if (scope) key = traditional ? scope :
1462 | scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
1463 | // handle data in serializeArray() format
1464 | if (!scope && array) params.add(value.name, value.value)
1465 | // recurse into nested objects
1466 | else if (type == "array" || (!traditional && type == "object"))
1467 | serialize(params, value, traditional, key)
1468 | else params.add(key, value)
1469 | })
1470 | }
1471 |
1472 | $.param = function(obj, traditional){
1473 | var params = []
1474 | params.add = function(k, v){ this.push(escape(k) + '=' + escape(v)) }
1475 | serialize(params, obj, traditional)
1476 | return params.join('&').replace(/%20/g, '+')
1477 | }
1478 | })(Zepto)
1479 |
1480 | ;(function($){
1481 | $.fn.serializeArray = function() {
1482 | var result = [], el
1483 | $([].slice.call(this.get(0).elements)).each(function(){
1484 | el = $(this)
1485 | var type = el.attr('type')
1486 | if (this.nodeName.toLowerCase() != 'fieldset' &&
1487 | !this.disabled && type != 'submit' && type != 'reset' && type != 'button' &&
1488 | ((type != 'radio' && type != 'checkbox') || this.checked))
1489 | result.push({
1490 | name: el.attr('name'),
1491 | value: el.val()
1492 | })
1493 | })
1494 | return result
1495 | }
1496 |
1497 | $.fn.serialize = function(){
1498 | var result = []
1499 | this.serializeArray().forEach(function(elm){
1500 | result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
1501 | })
1502 | return result.join('&')
1503 | }
1504 |
1505 | $.fn.submit = function(callback) {
1506 | if (callback) this.bind('submit', callback)
1507 | else if (this.length) {
1508 | var event = $.Event('submit')
1509 | this.eq(0).trigger(event)
1510 | if (!event.isDefaultPrevented()) this.get(0).submit()
1511 | }
1512 | return this
1513 | }
1514 |
1515 | })(Zepto)
1516 |
1517 | ;(function($){
1518 | // __proto__ doesn't exist on IE<11, so redefine
1519 | // the Z function to use object extension instead
1520 | if (!('__proto__' in {})) {
1521 | $.extend($.zepto, {
1522 | Z: function(dom, selector){
1523 | dom = dom || []
1524 | $.extend(dom, $.fn)
1525 | dom.selector = selector || ''
1526 | dom.__Z = true
1527 | return dom
1528 | },
1529 | // this is a kludge but works
1530 | isZ: function(object){
1531 | return $.type(object) === 'array' && '__Z' in object
1532 | }
1533 | })
1534 | }
1535 |
1536 | // getComputedStyle shouldn't freak out when called
1537 | // without a valid element as argument
1538 | try {
1539 | getComputedStyle(undefined)
1540 | } catch(e) {
1541 | var nativeGetComputedStyle = getComputedStyle;
1542 | window.getComputedStyle = function(element){
1543 | try {
1544 | return nativeGetComputedStyle(element)
1545 | } catch(e) {
1546 | return null
1547 | }
1548 | }
1549 | }
1550 | })(Zepto)
1551 |
--------------------------------------------------------------------------------
/demo/zepto.onepagescroll.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * zepto.onepagescroll.js v1.2.2
3 | * ===========================================================
4 | * Copyright 2014 Pete Rojwongsuriya.
5 | * http://www.thepetedesign.com
6 | *
7 | * Create an Apple-like website that let user scroll
8 | * one page at a time
9 | *
10 | * Credit: Eike Send for the awesome swipe event
11 | * https://github.com/peachananr/zepto-onepage-scroll
12 | *
13 | *
14 | * Zepto Modules Required:
15 | * - touch.js
16 | * - fx.js
17 | *
18 | *
19 | * License: GPL v3
20 | *
21 | * ========================================================== */
22 |
23 | ;(function($){
24 | $.extend($.fn, {
25 | onePageScroll: function(options){
26 |
27 | var defaults = {
28 | sectionContainer: "section",
29 | easing: "ease",
30 | animationTime: 1000,
31 | pagination: true,
32 | updateURL: false,
33 | keyboard: true,
34 | beforeMove: null,
35 | afterMove: null,
36 | loop: false,
37 | responsiveFallback: false
38 | };
39 |
40 | var settings = $.extend({}, defaults, options),
41 | el = $(this),
42 | sections = $(settings.sectionContainer),
43 | total = sections.length,
44 | status = "off",
45 | topPos = 0,
46 | lastAnimation = 0,
47 | lastAnimation = 0,
48 | quietPeriod = 300,
49 | paginationList = "",
50 | body = $("body");
51 |
52 |
53 | /*------------------------------------------------*/
54 | /* Credit: Eike Send for the awesome swipe event */
55 | /*------------------------------------------------*/
56 |
57 | $.fn.swipeEvents = function() {
58 | return this.each(function() {
59 |
60 | var startX,
61 | startY,
62 | $this = $(this);
63 |
64 | $this.on('touchstart', touchstart);
65 |
66 | function touchstart(event) {
67 | var touches = event.touches;
68 | if (touches && touches.length) {
69 | startX = touches[0].pageX;
70 | startY = touches[0].pageY;
71 | $this.on('touchmove', touchmove);
72 | }
73 | }
74 |
75 | function touchmove(event) {
76 | var touches = event.touches;
77 | if (touches && touches.length) {
78 | event.preventDefault();
79 | var deltaX = startX - touches[0].pageX;
80 | var deltaY = startY - touches[0].pageY;
81 |
82 | if (deltaX >= 50) {
83 | $this.trigger("swipeLeft");
84 | }
85 | if (deltaX <= -50) {
86 | $this.trigger("swipeRight");
87 | }
88 | if (deltaY >= 50) {
89 | $this.trigger("swipeUp");
90 | }
91 | if (deltaY <= -50) {
92 | $this.trigger("swipeDown");
93 | }
94 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
95 | $this.off('touchmove', touchmove);
96 | }
97 | }
98 | }
99 |
100 | });
101 | };
102 |
103 | /*---------------------------------*/
104 | /* Function to transform the page */
105 | /*---------------------------------*/
106 |
107 | $.fn.transformPage = function(settings, pos, index, next_el) {
108 | var el2 = $(this);
109 |
110 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el);
111 |
112 | el2.animate({
113 | translate3d: "0, " + pos + "%, 0"
114 | }, settings.animationTime, settings.easing, function() {
115 | if (typeof settings.afterMove == 'function') settings.afterMove(index);
116 | });
117 | }
118 |
119 | /*---------------------------------*/
120 | /* Function to move down section */
121 | /*---------------------------------*/
122 |
123 | $.fn.moveDown = function() {
124 | var timeNow = new Date().getTime();
125 |
126 | // Cancel scroll if currently animating or within quiet period
127 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
128 | event.preventDefault();
129 | return;
130 | }
131 |
132 | var index = $(settings.sectionContainer +".active").data("index"),
133 | current = $(settings.sectionContainer + "[data-index='" + index + "']"),
134 | next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) + 1) + "']"),
135 | el3 = $(this);
136 |
137 |
138 | if(next.length < 1) {
139 | if (settings.loop == true) {
140 | pos = 0;
141 | next = $(settings.sectionContainer + "[data-index='1']");
142 | } else {
143 | return
144 | }
145 |
146 | }else {
147 | pos = (index * 100) * -1;
148 | }
149 | var next_index = next.data("index");
150 | current.removeClass("active");
151 | next.addClass("active");
152 |
153 | if(settings.pagination == true) {
154 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
155 | $(".onepage-pagination li a" + "[data-index='" + next_index + "']").addClass("active");
156 | }
157 |
158 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
159 | body.addClass("viewing-page-"+ next_index);
160 |
161 | if (history.replaceState && settings.updateURL == true) {
162 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) + 1);
163 | history.pushState( {}, document.title, href );
164 | }
165 | el3.transformPage(settings, pos, next_index, next);
166 | lastAnimation = timeNow;
167 | }
168 |
169 | /*---------------------------------*/
170 | /* Function to move up section */
171 | /*---------------------------------*/
172 |
173 | $.fn.moveUp = function() {
174 | var timeNow = new Date().getTime();
175 |
176 | // Cancel scroll if currently animating or within quiet period
177 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
178 | event.preventDefault();
179 | return;
180 | }
181 |
182 | var index = $(settings.sectionContainer +".active").data("index"),
183 | current = $(settings.sectionContainer + "[data-index='" + index + "']"),
184 | next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) - 1) + "']"),
185 | el4 = $(this);
186 |
187 | if(next.length < 1) {
188 | if (settings.loop == true) {
189 | pos = ((total - 1) * 100) * -1;
190 | next = $(settings.sectionContainer + "[data-index='" + total + "']");
191 | } else {
192 | return
193 | }
194 | }else {
195 | pos = ((next.data("index") - 1) * 100) * -1;
196 | }
197 | var next_index = next.data("index");
198 | current.removeClass("active")
199 | next.addClass("active")
200 |
201 | if(settings.pagination == true) {
202 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
203 | $(".onepage-pagination li a" + "[data-index='" + next_index + "']").addClass("active");
204 | }
205 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
206 | body.addClass("viewing-page-"+ next_index);
207 |
208 | if (history.replaceState && settings.updateURL == true) {
209 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) - 1);
210 | history.pushState( {}, document.title, href );
211 | }
212 | el4.transformPage(settings, pos, next_index, next);
213 | lastAnimation = timeNow;
214 | }
215 |
216 | /*-------------------------------------------*/
217 | /* Function to move to specified section */
218 | /*-------------------------------------------*/
219 |
220 | $.fn.moveTo = function(page_index) {
221 | var timeNow = new Date().getTime();
222 |
223 | // Cancel scroll if currently animating or within quiet period
224 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
225 | event.preventDefault();
226 | return;
227 | }
228 | var current = $(settings.sectionContainer + ".active"),
229 | next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"),
230 | el5 = $(this);
231 |
232 | if(next.length > 0) {
233 | var next_index = next.data("index");
234 | current.removeClass("active");
235 | next.addClass("active");
236 | $(".onepage-pagination li a" + ".active").removeClass("active");
237 | $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
238 |
239 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
240 | body.addClass("viewing-page-"+ next_index);
241 |
242 | pos = ((page_index - 1) * 100) * -1;
243 |
244 | if (history.replaceState && settings.updateURL == true) {
245 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(page_index) - 1);
246 | history.pushState( {}, document.title, href );
247 | }
248 | el5.transformPage(settings, pos, page_index, next);
249 | lastAnimation = timeNow;
250 | }
251 | }
252 |
253 | /*-------------------------------------------*/
254 | /* Responsive Fallback trigger */
255 | /*-------------------------------------------*/
256 |
257 | var responsive = function() {
258 |
259 | if ($(document).width() < settings.responsiveFallback) {
260 |
261 | body.addClass("disabled-onepage-scroll");
262 | $(document).off('mousewheel DOMMouseScroll', mouseWheelHandler);
263 | $(document).off("swipeDown swipeUp");
264 |
265 | } else {
266 |
267 | if (body.hasClass("disabled-onepage-scroll")) {
268 | bodyremoveClass("disabled-onepage-scroll");
269 | $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
270 | }
271 |
272 | $(document).swipeEvents().on("swipeDown", function(event){
273 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
274 | el.moveUp();
275 | }).on("swipeUp", function(event){
276 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
277 | el.moveDown();
278 | });
279 |
280 |
281 | $(document).on('mousewheel DOMMouseScroll', mouseWheelHandler);
282 |
283 | }
284 | }
285 |
286 | /*-------------------------------------------*/
287 | /* Initialize scroll detection */
288 | /*-------------------------------------------*/
289 |
290 | function init_scroll(event, delta) {
291 | var deltaOfInterest = delta;
292 |
293 | if (deltaOfInterest < 0) {
294 | el.moveDown()
295 | } else {
296 | el.moveUp()
297 | }
298 | }
299 |
300 |
301 | /*-------------------------------------------*/
302 | /* Prepare Everything */
303 | /*-------------------------------------------*/
304 |
305 | el.addClass("onepage-wrapper")
306 | el.css("position","relative");
307 | $.each(sections, function(i, item){
308 | $(this).addClass("ops-section").data("index", i + 1);
309 | topPos = topPos + 100;
310 |
311 | if(settings.pagination == true) {
312 | paginationList += "Zepto One Page Scroll by Pete R. | The Pete Design
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
685 |
686 |
687 |
688 |
689 | 0){var u=s.data("index");i.removeClass("active");s.addClass("active");e(".onepage-pagination li a"+".active").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");document.body.className=document.body.className.replace(/\bviewing-page-\d.*?\b/g,"");h.addClass("viewing-page-"+u);b=(t-1)*100*-1;if(history.replaceState&&r.updateURL==true){var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(parseInt(t)-1);history.pushState({},document.title,a)}o.transformPage(r,b,t,s);f=n}};var p=function(){if(e(document).width()"}});e(document).swipeEvents().on("swipeDown",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveUp()}).on("swipeUp",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveDown()});if(r.pagination==true){e("
- " + paginationList + "
690 |
691 | 
743 |
744 |
751 |
752 |
753 |
760 |
761 |
762 |
763 |
--------------------------------------------------------------------------------
/onepage-scroll.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin: 0;
3 | overflow: hidden;
4 | -webkit-transition: opacity 400ms;
5 | -moz-transition: opacity 400ms;
6 | transition: opacity 400ms;
7 | }
8 |
9 | body, .onepage-wrapper, html {
10 | display: block;
11 | position: static;
12 | padding: 0;
13 | width: 100%;
14 | height: 100%;
15 | }
16 |
17 | .onepage-wrapper {
18 | width: 100%;
19 | height: 100%;
20 | display: block;
21 | position: relative;
22 | padding: 0;
23 | -webkit-transform-style: preserve-3d;
24 | }
25 |
26 | .onepage-wrapper .ops-section {
27 | width: 100%;
28 | height: 100%;
29 | position: relative;
30 | }
31 |
32 | .onepage-pagination {
33 | position: absolute;
34 | right: 10px;
35 | top: 50%;
36 | z-index: 5;
37 | list-style: none;
38 | margin: 0;
39 | padding: 0;
40 | }
41 | .onepage-pagination li {
42 | padding: 0;
43 | text-align: center;
44 | }
45 | .onepage-pagination li a{
46 | padding: 10px;
47 | width: 4px;
48 | height: 4px;
49 | display: block;
50 |
51 | }
52 | .onepage-pagination li a:before{
53 | content: '';
54 | position: absolute;
55 | width: 4px;
56 | height: 4px;
57 | background: rgba(0,0,0,0.85);
58 | border-radius: 10px;
59 | -webkit-border-radius: 10px;
60 | -moz-border-radius: 10px;
61 | }
62 |
63 | .onepage-pagination li a.active:before{
64 | width: 10px;
65 | height: 10px;
66 | background: none;
67 | border: 1px solid black;
68 | margin-top: -4px;
69 | left: 8px;
70 | }
71 |
72 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
73 | overflow: auto;
74 | }
75 |
76 | .disabled-onepage-scroll .onepage-wrapper .ops-section {
77 | position: relative !important;
78 | top: auto !important;
79 | }
80 | .disabled-onepage-scroll .onepage-wrapper {
81 | -webkit-transform: none !important;
82 | -moz-transform: none !important;
83 | transform: none !important;
84 | -ms-transform: none !important;
85 | min-height: 100%;
86 | }
87 |
88 |
89 | .disabled-onepage-scroll .onepage-pagination {
90 | display: none;
91 | }
92 |
93 | body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
94 | position: inherit;
95 | }
--------------------------------------------------------------------------------
/zepto.onepagescroll.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * zepto.onepagescroll.js v1.2.2
3 | * ===========================================================
4 | * Copyright 2014 Pete Rojwongsuriya.
5 | * http://www.thepetedesign.com
6 | *
7 | * Create an Apple-like website that let user scroll
8 | * one page at a time
9 | *
10 | * Credit: Eike Send for the awesome swipe event
11 | * https://github.com/peachananr/zepto-onepage-scroll
12 | *
13 | *
14 | * Zepto Modules Required:
15 | * - touch.js
16 | * - fx.js
17 | *
18 | *
19 | * License: GPL v3
20 | *
21 | * ========================================================== */
22 |
23 | ;(function($){
24 | $.extend($.fn, {
25 | onePageScroll: function(options){
26 |
27 | var defaults = {
28 | sectionContainer: "section",
29 | easing: "ease",
30 | animationTime: 1000,
31 | pagination: true,
32 | updateURL: false,
33 | keyboard: true,
34 | beforeMove: null,
35 | afterMove: null,
36 | loop: false,
37 | responsiveFallback: false
38 | };
39 |
40 | var settings = $.extend({}, defaults, options),
41 | el = $(this),
42 | sections = $(settings.sectionContainer),
43 | total = sections.length,
44 | status = "off",
45 | topPos = 0,
46 | lastAnimation = 0,
47 | lastAnimation = 0,
48 | quietPeriod = 300,
49 | paginationList = "",
50 | body = $("body");
51 |
52 |
53 | /*------------------------------------------------*/
54 | /* Credit: Eike Send for the awesome swipe event */
55 | /*------------------------------------------------*/
56 |
57 | $.fn.swipeEvents = function() {
58 | return this.each(function() {
59 |
60 | var startX,
61 | startY,
62 | $this = $(this);
63 |
64 | $this.on('touchstart', touchstart);
65 |
66 | function touchstart(event) {
67 | var touches = event.touches;
68 | if (touches && touches.length) {
69 | startX = touches[0].pageX;
70 | startY = touches[0].pageY;
71 | $this.on('touchmove', touchmove);
72 | }
73 | }
74 |
75 | function touchmove(event) {
76 | var touches = event.touches;
77 | if (touches && touches.length) {
78 | event.preventDefault();
79 | var deltaX = startX - touches[0].pageX;
80 | var deltaY = startY - touches[0].pageY;
81 |
82 | if (deltaX >= 50) {
83 | $this.trigger("swipeLeft");
84 | }
85 | if (deltaX <= -50) {
86 | $this.trigger("swipeRight");
87 | }
88 | if (deltaY >= 50) {
89 | $this.trigger("swipeUp");
90 | }
91 | if (deltaY <= -50) {
92 | $this.trigger("swipeDown");
93 | }
94 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
95 | $this.off('touchmove', touchmove);
96 | }
97 | }
98 | }
99 |
100 | });
101 | };
102 |
103 | /*---------------------------------*/
104 | /* Function to transform the page */
105 | /*---------------------------------*/
106 |
107 | $.fn.transformPage = function(settings, pos, index, next_el) {
108 | var el2 = $(this);
109 |
110 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el);
111 |
112 | el2.animate({
113 | translate3d: "0, " + pos + "%, 0"
114 | }, settings.animationTime, settings.easing, function() {
115 | if (typeof settings.afterMove == 'function') settings.afterMove(index);
116 | });
117 | }
118 |
119 | /*---------------------------------*/
120 | /* Function to move down section */
121 | /*---------------------------------*/
122 |
123 | $.fn.moveDown = function() {
124 | var timeNow = new Date().getTime();
125 |
126 | // Cancel scroll if currently animating or within quiet period
127 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
128 | event.preventDefault();
129 | return;
130 | }
131 |
132 | var index = $(settings.sectionContainer +".active").data("index"),
133 | current = $(settings.sectionContainer + "[data-index='" + index + "']"),
134 | next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) + 1) + "']"),
135 | el3 = $(this);
136 |
137 |
138 | if(next.length < 1) {
139 | if (settings.loop == true) {
140 | pos = 0;
141 | next = $(settings.sectionContainer + "[data-index='1']");
142 | } else {
143 | return
144 | }
145 |
146 | }else {
147 | pos = (index * 100) * -1;
148 | }
149 | var next_index = next.data("index");
150 | current.removeClass("active");
151 | next.addClass("active");
152 |
153 | if(settings.pagination == true) {
154 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
155 | $(".onepage-pagination li a" + "[data-index='" + next_index + "']").addClass("active");
156 | }
157 |
158 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
159 | body.addClass("viewing-page-"+ next_index);
160 |
161 | if (history.replaceState && settings.updateURL == true) {
162 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) + 1);
163 | history.pushState( {}, document.title, href );
164 | }
165 | el3.transformPage(settings, pos, next_index, next);
166 | lastAnimation = timeNow;
167 | }
168 |
169 | /*---------------------------------*/
170 | /* Function to move up section */
171 | /*---------------------------------*/
172 |
173 | $.fn.moveUp = function() {
174 | var timeNow = new Date().getTime();
175 |
176 | // Cancel scroll if currently animating or within quiet period
177 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
178 | event.preventDefault();
179 | return;
180 | }
181 |
182 | var index = $(settings.sectionContainer +".active").data("index"),
183 | current = $(settings.sectionContainer + "[data-index='" + index + "']"),
184 | next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) - 1) + "']"),
185 | el4 = $(this);
186 |
187 | if(next.length < 1) {
188 | if (settings.loop == true) {
189 | pos = ((total - 1) * 100) * -1;
190 | next = $(settings.sectionContainer + "[data-index='" + total + "']");
191 | } else {
192 | return
193 | }
194 | }else {
195 | pos = ((next.data("index") - 1) * 100) * -1;
196 | }
197 | var next_index = next.data("index");
198 | current.removeClass("active")
199 | next.addClass("active")
200 |
201 | if(settings.pagination == true) {
202 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
203 | $(".onepage-pagination li a" + "[data-index='" + next_index + "']").addClass("active");
204 | }
205 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
206 | body.addClass("viewing-page-"+ next_index);
207 |
208 | if (history.replaceState && settings.updateURL == true) {
209 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) - 1);
210 | history.pushState( {}, document.title, href );
211 | }
212 | el4.transformPage(settings, pos, next_index, next);
213 | lastAnimation = timeNow;
214 | }
215 |
216 | /*-------------------------------------------*/
217 | /* Function to move to specified section */
218 | /*-------------------------------------------*/
219 |
220 | $.fn.moveTo = function(page_index) {
221 | var timeNow = new Date().getTime();
222 |
223 | // Cancel scroll if currently animating or within quiet period
224 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
225 | event.preventDefault();
226 | return;
227 | }
228 | var current = $(settings.sectionContainer + ".active"),
229 | next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"),
230 | el5 = $(this);
231 |
232 | if(next.length > 0) {
233 | var next_index = next.data("index");
234 | current.removeClass("active");
235 | next.addClass("active");
236 | $(".onepage-pagination li a" + ".active").removeClass("active");
237 | $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
238 |
239 | document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, '');
240 | body.addClass("viewing-page-"+ next_index);
241 |
242 | pos = ((page_index - 1) * 100) * -1;
243 |
244 | if (history.replaceState && settings.updateURL == true) {
245 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(page_index) - 1);
246 | history.pushState( {}, document.title, href );
247 | }
248 | el5.transformPage(settings, pos, page_index, next);
249 | lastAnimation = timeNow;
250 | }
251 | }
252 |
253 | /*-------------------------------------------*/
254 | /* Responsive Fallback trigger */
255 | /*-------------------------------------------*/
256 |
257 | var responsive = function() {
258 |
259 | if ($(document).width() < settings.responsiveFallback) {
260 |
261 | body.addClass("disabled-onepage-scroll");
262 | $(document).off('mousewheel DOMMouseScroll', mouseWheelHandler);
263 | $(document).off("swipeDown swipeUp");
264 |
265 | } else {
266 |
267 | if (body.hasClass("disabled-onepage-scroll")) {
268 | bodyremoveClass("disabled-onepage-scroll");
269 | $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
270 | }
271 |
272 | $(document).swipeEvents().on("swipeDown", function(event){
273 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
274 | el.moveUp();
275 | }).on("swipeUp", function(event){
276 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
277 | el.moveDown();
278 | });
279 |
280 |
281 | $(document).on('mousewheel DOMMouseScroll', mouseWheelHandler);
282 |
283 | }
284 | }
285 |
286 | /*-------------------------------------------*/
287 | /* Initialize scroll detection */
288 | /*-------------------------------------------*/
289 |
290 | function init_scroll(event, delta) {
291 | var deltaOfInterest = delta;
292 |
293 | if (deltaOfInterest < 0) {
294 | el.moveDown()
295 | } else {
296 | el.moveUp()
297 | }
298 | }
299 |
300 |
301 | /*-------------------------------------------*/
302 | /* Prepare Everything */
303 | /*-------------------------------------------*/
304 |
305 | el.addClass("onepage-wrapper")
306 | el.css("position","relative");
307 | $.each(sections, function(i, item){
308 | $(this).addClass("ops-section").data("index", i + 1);
309 | topPos = topPos + 100;
310 |
311 | if(settings.pagination == true) {
312 | paginationList += "
692 |
693 |
694 |
695 |
696 |
697 |
698 | 
711 |
712 |
713 |
714 |
729 |
730 |
731 |
739 |
740 |
741 | Back to The Pete Design
742 |
699 |
710 | Zepto One Page Scroll v1.2
700 |Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin. (Zepto Library & Modules Required)
701 |Created by Pete R., Founder of Travelistly & BucketListly
702 | 703 | 704 |
705 |
706 | Download on Github
707 |
708 |
709 |
711 |
715 |
728 | Ready-to-use plugin
716 |All you need is an HTML markup, call the script and BAM!
717 |
718 | <div class="main">
719 | <section>...</section>
720 | <section>...</section>
721 | ...
722 | </div>
723 |
724 |
725 | $(".main").onePageScroll();
726 |
727 |
732 |
738 | Pretty Neat Eh?
733 |You can customize the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'
734 |
735 | Download on Github
736 |
737 |
743 | - " + paginationList + "
- "+c+"