randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved path to scrollIt.js

Browse source
This commit is contained in:
Open-Steps.org 2015-02-14 10:04:24 +01:00
parent 4485cd1978
commit 9e3b363653
14 changed files with 1 additions and 616 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_includes/head.html
View file

@ -21,7 +21,7 @@
<script src="{{ '/bower_components/vegas/dist/jquery.vegas.min.js' | prepend: site.baseurl }}" type="text/javascript"></script> <script src="{{ '/bower_components/vegas/dist/jquery.vegas.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
<script src="{{ '/bower_components/picbookjs/js/picbook.min.js' | prepend: site.baseurl }}" type="text/javascript"></script> <script src="{{ '/bower_components/picbookjs/js/picbook.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
<script src="{{ '/js/jquery.imagefill.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script> <script src="{{ '/js/jquery.imagefill.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
<script src="{{ '/js/scrollit.js-master/scrollit.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script> <script src="{{ '/js/scrollit.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
<script src="{{ '/js/custom.js' | prepend: site.baseurl }}" type="text/javascript" ></script> <script src="{{ '/js/custom.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
</head> </head>

3
js/scrollIt.js-master/.gitignore vendored
View file

@ -1,3 +0,0 @@
*.swp
*.sassc
.DS_Store

5
js/scrollIt.js-master/AUTHORS.txt
View file

@ -1,5 +0,0 @@
Authors ordered by first contribution
Chris Polis <cmpolis@gmail.com>
Adam Merrifield <macagp@gmail.com>
Frank S

22
js/scrollIt.js-master/LICENSE.txt
View file

@ -1,22 +0,0 @@
The MIT License (MIT)
Copyright (c) 2013 Chris Polis
https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

67
js/scrollIt.js-master/README.md
View file

@ -1,67 +0,0 @@
### [Demo and more information](http://bytemuse.com/scrollIt.js)
## About
ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages. This is why it rocks:
- **Easy to implement:** One JS call, just put data- attributes on the DOM
- **Lightweight:** ~1kb minified
- **Active Class:** Your navigation is updated automatically
- **Configurable:** Set the animation easing, duration, callbacks and more
- **Keyboard Navigation:** Press the up and down keys to move...
## Usage
1. Include jQuery and scrollIt.js
```html
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>
```
2. Put a data-scroll-index attribute on each section
```html
<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>
```
3. Put corresponding data-scroll-nav attributes on each nav
```html
<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>
```
4. For links to sections, put on a data-scroll-goto attribute
```html
<a data-scroll-goto="0">Back to top</a>
```
5. Call scrollIt()
```JavaScript
$(function(){
$.scrollIt();
});
```
## Options
To customize scrollIt.js, simply pass in an options object: (defaults shown)
```JavaScript
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: 0 // offste (in px) for fixed top navigation
});
```
## Credit
Created by [@ChrisPolis](http://twitter.com/chrispolis), *[blog](http://bytemuse.com)*
Feel free to use, share and fork.
Enjoy!

42
js/scrollIt.js-master/ScrollIt.jquery.json
View file

@ -1,42 +0,0 @@
{
"name": "ScrollIt",
"title": "ScrollIt",
"description": "ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.",
"keywords": [
"page",
"scroll",
"navigation",
"keydown",
"keyboard"
],
"version": "1.0.3",
"author": {
"name": "Chris Polis, Adam Merrifield and Frank S",
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt"
},
"maintainers": [
{
"name": "Chris Polis",
"email": "cmpolis@gmail.com",
"url": "http://ByteMuse.com"
},
{
"name": "Adam Merrifield",
"email": "macagp@gmail.com",
"url": "http://adam.merrifield.ca"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt"
}
],
"bugs": "https://github.com/cmpolis/scrollIt.js/issues",
"homepage": "https://github.com/cmpolis/scrollIt.js",
"docs": "https://github.com/cmpolis/scrollIt.js",
"download": "https://github.com/cmpolis/scrollIt.js/archive/master.zip",
"dependencies": {
"jquery": ">=1.8"
}
}

8
js/scrollIt.js-master/bower.json
View file

@ -1,8 +0,0 @@
{
"name": "ScrollIt",
"version": "1.0.0",
"main": "./scrollIt.js",
"dependencies": {
"jquery": "~1.10.2"
}
}

71
js/scrollIt.js-master/demo/index.haml
View file

@ -1,71 +0,0 @@
!!!
%html(xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en')
%head
%title ScrollIt.js - easy vertical scrolling
%script(type='text/javascript' src='jquery-1.10.2.min.js')
%script(type='text/javascript' src='../scrollIt.min.js')
%link(href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css')
%link(rel='stylesheet' href='style.css')
%script $(function() { $.scrollIt(); });
%body
.nav-container
%nav
%ul
%li
%a.active(data-scroll-nav='0') About
%li
%a(data-scroll-nav='1') Usage
%li
%a(data-scroll-nav='2') Options
%li
%a(data-scroll-nav='3') Credit
%section(data-scroll-index='0')
.content
%h1 ScrollIt.js
<a href="https://twitter.com/share" class="twitter-share-button" data-text="ScrollIt.js - easy vertical scrolling" data-via="ChrisPolis">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
%h2 About
%p ScrollIt.js<i>(scroll&#8226;it&#8226;dot&#8226;js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a>
%h4 This is why it rocks:
%ul.why-list
%li <b>Easy to implement:</b> One JS call, just put data- attributes on the DOM
%li <b>Lightweight:</b> ~1kb minified
%li <b>Active Class:</b> Your navigation is updated automatically
%li <b>Configurable:</b> Set the animation easing, duration, callbacks and more
%li <b>Keyboard Navigation:</b> Press the up and down keys to move...
%section(data-scroll-index='1')
.content
%h2 Usage
%p
1) Include jQuery and scrollIt.js
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
%p
2) Put a <i>data-scroll-index</i> attribute on each section
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
%p
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
%p
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
%p
5) Call <i>scrollIt()</i>
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
%p <i>View the source of this page for an example</i>
%section(data-scroll-index='2')
.content
%h2 Options
%p To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i>
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
%section(data-scroll-index='3')
.content
%h2 Credit
%p ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.
%p Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a>
%p Enjoy!
%p.bottom-link
%a(data-scroll-goto='0') Back to top

93
js/scrollIt.js-master/demo/index.html
View file

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>ScrollIt.js by @ChrisPolis</title>
<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
<script src='../scrollIt.min.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
<script>$(function() { $.scrollIt(); });</script>
</head>
<body>
<div class='nav-container'>
<nav>
<ul>
<li>
<a class='active' data-scroll-nav='0'>About</a>
</li>
<li>
<a data-scroll-nav='1'>Usage</a>
</li>
<li>
<a data-scroll-nav='2'>Options</a>
</li>
<li>
<a data-scroll-nav='3'>Credit</a>
</li>
</ul>
</nav>
</div>
<section data-scroll-index='0'>
<div class='content'>
<h1>ScrollIt.js</h1>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out this jQuery plugin - ScrollIt.js" data-via="ChrisPolis">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<h2>About</h2>
<p>ScrollIt.js<i>(scroll&#8226;it&#8226;dot&#8226;js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a></p>
<h4>This is why it rocks:</h4>
<ul class='why-list'>
<li><b>Easy to implement:</b> One JS call, just put data- attributes on the DOM</li>
<li><b>Lightweight:</b> ~1kb minified</li>
<li><b>Active Class:</b> Your navigation is updated automatically</li>
<li><b>Configurable:</b> Set the animation easing, duration, callbacks and more</li>
<li><b>Keyboard Navigation:</b> Press the up and down keys to move...</li>
</ul>
</div>
</section>
<section data-scroll-index='1'>
<div class='content'>
<h2>Usage</h2>
<p>
1) Include jQuery and scrollIt.js
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
</p>
<p>
2) Put a <i>data-scroll-index</i> attribute on each section
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
</p>
<p>
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
</p>
<p>
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
</p>
<p>
5) Call <i>scrollIt()</i>
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
</p>
<p><i>View the source of this page for an example</i></p>
</div>
</section>
<section data-scroll-index='2'>
<div class='content'>
<h2>Options</h2>
<p>To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i></p>
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
</div>
</section>
<section data-scroll-index='3'>
<div class='content'>
<h2>Credit</h2>
<p>ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.</p>
<p>Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a></p>
<p>Enjoy!</p>
<p class='bottom-link'>
<a data-scroll-goto='0'>Back to top</a>
</p>
</div>
</section>
</body>
</html>

6
js/scrollIt.js-master/demo/jquery-1.10.2.min.js vendored
View file

File diff suppressed because one or more lines are too long

87
js/scrollIt.js-master/demo/style.css
View file

@ -1,87 +0,0 @@
body {
padding: 0px;
margin: 0px;
font-family: "Open Sans", sans-serif; }
h1, h2, h4, nav li a {
font-family: "Headland One", Georgia, serif; }
h1 {
font-size: 48px;
margin-top: 80px;
margin-bottom: 10px;
color: #002e40; }
h2 {
margin-top: 80px;
font-size: 28px; }
h4 {
font-size: 20px;
margin-bottom: 10px; }
.why-list {
margin-top: 0px; }
.why-list li {
line-height: 28px; }
a {
cursor: pointer; }
ul {
list-style: none; }
.nav-container {
background-color: #002e40;
width: 100%;
position: fixed;
left: 0px; }
nav {
text-align: center;
width: 640px;
margin: 0px auto; }
nav ul {
padding: 0px; }
nav li {
width: 24%;
display: inline-block; }
nav li a {
font-size: 15px;
color: white; }
nav li a.active {
color: #aaaaaa; }
@media screen and (max-width: 640px) {
nav {
width: 90%; }
nav li a {
font-size: 18px; } }
section {
padding-top: 40px;
height: 1200px;
width: 100%; }
section .content {
margin: 0px auto;
max-width: 640px; }
@media screen and (max-width: 640px) {
section .content {
width: 90%; } }
section .content a {
color: #002e40; }
section:nth-child(odd) {
background-color: #002e40;
color: white; }
section:nth-child(odd) a {
color: white; }
.bottom-link {
margin-top: 80px;
font-style: italic; }
.gist-meta {
display: none; }
.file-data {
font-size: 14px; }

82
js/scrollIt.js-master/demo/style.sass
View file

@ -1,82 +0,0 @@
$pageWidth: 640px
$responsiveWidth: 90%
$primary: #fff
$secondary: #002E40
body
padding: 0px
margin: 0px
font-family: 'Open Sans', sans-serif
h1, h2, h4, nav li a
font-family: 'Headland One', Georgia, serif
h1
font-size: 48px
margin-top: 80px
margin-bottom: 10px
color: $secondary
h2
margin-top: 80px
font-size: 28px
h4
font-size: 20px
margin-bottom: 10px
.why-list
margin-top: 0px
li
line-height: 28px
a
cursor: pointer
ul
list-style: none
.nav-container
background-color: $secondary
width: 100%
position: fixed
left: 0px
nav
text-align: center
width: $pageWidth
margin: 0px auto
ul
padding: 0px
li
width: 24%
display: inline-block
a
font-size: 15px
color: $primary
a.active
color: #aaa
@media screen and (max-width: $pageWidth)
width: $responsiveWidth
li
a
font-size: 18px
section
padding-top: 40px
height: 1200px
width: 100%
.content
margin: 0px auto
max-width: $pageWidth
@media screen and (max-width: $pageWidth)
width: $responsiveWidth
a
color: $secondary
section:nth-child(odd)
background-color: $secondary
color: $primary
a
color: $primary
.bottom-link
margin-top: 80px
font-style: italic
.gist-meta
display: none
.file-data
font-size: 14px

129
js/scrollIt.js-master/scrollIt.js
View file

@ -1,129 +0,0 @@
/**
* ScrollIt
* ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.
*
* Latest version: https://github.com/cmpolis/scrollIt.js
*
* License <https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt>
*/
(function($) {
'use strict';
var pluginName = 'ScrollIt',
pluginVersion = '1.0.3';
/*
* OPTIONS
*/
var defaults = {
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset : 0
};
$.scrollIt = function(options) {
/*
* DECLARATIONS
*/
var settings = $.extend(defaults, options),
active = 0,
lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');
/*
* METHODS
*/
/**
* navigate
*
* sets up navigation animation
*/
var navigate = function(ndx) {
if(ndx < 0 || ndx > lastIndex) return;
var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
$('html,body').animate({
scrollTop: targetTop,
easing: settings.easing
}, settings.scrollTime);
};
/**
* doScroll
*
* runs navigation() when criteria are met
*/
var doScroll = function (e) {
var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
$(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
navigate(parseInt(target));
};
/**
* keyNavigation
*
* sets up keyboard navigation behavior
*/
var keyNavigation = function (e) {
var key = e.which;
if($('html,body').is(':animated') && (key == settings.upKey || key == settings.downKey)) {
return false;
}
if(key == settings.upKey && active > 0) {
navigate(parseInt(active) - 1);
return false;
} else if(key == settings.downKey && active < lastIndex) {
navigate(parseInt(active) + 1);
return false;
}
return true;
};
/**
* updateActive
*
* sets the currently active item
*/
var updateActive = function(ndx) {
if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);
active = ndx;
$('[data-scroll-nav]').removeClass(settings.activeClass);
$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
};
/**
* watchActive
*
* watches currently active item and updates accordingly
*/
var watchActive = function() {
var winTop = $(window).scrollTop();
var visible = $('[data-scroll-index]').filter(function(ndx, div) {
return winTop >= $(div).offset().top + settings.topOffset &&
winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
});
var newActive = visible.first().attr('data-scroll-index');
updateActive(newActive);
};
/*
* runs methods
*/
$(window).on('scroll',watchActive).scroll();
$(window).on('keydown', keyNavigation);
$('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
e.preventDefault();
doScroll(e);
});
};
}(jQuery));

0
js/scrollIt.js-master/scrollIt.min.js → js/scrollIt.min.js vendored
View file