Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit ac0579b
Showing
8 changed files
with
769 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<html> | ||
<head> | ||
<title>Scrolling Tour Demo</title> | ||
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" /> | ||
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" /> | ||
</head> | ||
<body> | ||
<div id="container"> | ||
<div id="wrapper"> | ||
<div id="scenes-container"> | ||
<div class="scene" id="scene-one"> | ||
<div class="point" id="point-one">point One</div> | ||
<div class="point" id="point-two">point Two</div> | ||
<div class="point" id="point-three">point Three</div> | ||
<div class="point" id="point-four">point Four</div> | ||
</div> | ||
<div class="scene" id="scene-two"> | ||
<div class="point" id="point-five">point Five</div> | ||
<div class="point" id="point-six">point Six</div> | ||
<div class="point" id="point-seven">point Seven</div> | ||
<div class="point" id="point-eight">point Eight</div> | ||
</div> | ||
<div class="scene" id="scene-three"> | ||
<div class="point" id="point-nine">point Nine</div> | ||
<div class="point" id="point-ten">point Ten</div> | ||
<div class="point" id="point-eleven">point Eleven</div> | ||
<div class="point" id="point-twelve">point Twelve</div> | ||
</div> | ||
<div class="scene" id="scene-four"> | ||
<div class="point" id="point-thirteen">point 13</div> | ||
<div class="point" id="point-fourteen">point 14</div> | ||
<div class="point" id="point-fifteen">point 15</div> | ||
<div class="point" id="point-sixteen">point 16</div> | ||
</div> | ||
</div> | ||
<div id="tour-sidebar"> | ||
<div id="tour-controls-container"> | ||
<h3>Tour Demo</h3> | ||
<p>This is an explanation of what ever is going on and why the user wants to be taking a tour in the first place</p> | ||
<ol id="scrolling-tour-controller"> | ||
<li class="previous">Previous</li> | ||
<li class="next">Next</li> | ||
</ol> | ||
</div> | ||
<div id="tour-icons"> | ||
<div id="icon-1" class="icon">One</div> | ||
<div id="icon-2" class="icon">Two</div> | ||
<div id="icon-3" class="icon">Three</div> | ||
<div id="icon-4" class="icon">Four</div> | ||
<div id="icon-5" class="icon">Five</div> | ||
<div id="icon-6" class="icon">Six</div> | ||
<div id="icon-7" class="icon">Seven</div> | ||
<div id="icon-8" class="icon">Eight</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | ||
<script type="text/javascript" src="javascripts/jquery-scrollTo.js"></script> | ||
<script type="text/javascript" src="javascripts/jquery-scrolling-tour.js"></script> | ||
<script type="text/javascript" src="javascripts/tour.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,226 @@ | ||
jQuery(function( $ ){ | ||
$.easing.elasout = function(x, t, b, c, d) { | ||
var s=1.70158;var p=0;var a=c; | ||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
}; | ||
}); | ||
|
||
|
||
/** | ||
* jQuery.ScrollTo | ||
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com | ||
* Dual licensed under MIT and GPL. | ||
* Date: 5/25/2009 | ||
* | ||
* @projectDescription Easy element scrolling using jQuery. | ||
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html | ||
* Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP. | ||
* | ||
* @author Ariel Flesler | ||
* @version 1.4.2 | ||
* | ||
* @id jQuery.scrollTo | ||
* @id jQuery.fn.scrollTo | ||
* @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements. | ||
* The different options for target are: | ||
* - A number position (will be applied to all axes). | ||
* - A string position ('44', '100px', '+=90', etc ) will be applied to all axes | ||
* - A jQuery/DOM element ( logically, child of the element to scroll ) | ||
* - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc ) | ||
* - A hash { top:x, left:y }, x and y can be any kind of number/string like above. | ||
* - A percentage of the container's dimension/s, for example: 50% to go to the middle. | ||
* - The string 'max' for go-to-end. | ||
* @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead. | ||
* @param {Object,Function} settings Optional set of settings or the onAfter callback. | ||
* @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'. | ||
* @option {Number} duration The OVERALL length of the animation. | ||
* @option {String} easing The easing method for the animation. | ||
* @option {Boolean} margin If true, the margin of the target element will be deducted from the final position. | ||
* @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }. | ||
* @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes. | ||
* @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends. | ||
* @option {Function} onAfter Function to be called after the scrolling ends. | ||
* @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends. | ||
* @return {jQuery} Returns the same jQuery object, for chaining. | ||
* | ||
* @desc Scroll to a fixed position | ||
* @example $('div').scrollTo( 340 ); | ||
* | ||
* @desc Scroll relatively to the actual position | ||
* @example $('div').scrollTo( '+=340px', { axis:'y' } ); | ||
* | ||
* @dec Scroll using a selector (relative to the scrolled element) | ||
* @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } ); | ||
* | ||
* @ Scroll to a DOM element (same for jQuery object) | ||
* @example var second_child = document.getElementById('container').firstChild.nextSibling; | ||
* $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){ | ||
* alert('scrolled!!'); | ||
* }}); | ||
* | ||
* @desc Scroll on both axes, to different values | ||
* @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } ); | ||
*/ | ||
;(function( $ ){ | ||
|
||
var $scrollTo = $.scrollTo = function( target, duration, settings ){ | ||
$(window).scrollTo( target, duration, settings ); | ||
}; | ||
|
||
$scrollTo.defaults = { | ||
axis:'xy', | ||
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1 | ||
}; | ||
|
||
// Returns the element that needs to be animated to scroll the window. | ||
// Kept for backwards compatibility (specially for localScroll & serialScroll) | ||
$scrollTo.window = function( scope ){ | ||
return $(window)._scrollable(); | ||
}; | ||
|
||
// Hack, hack, hack :) | ||
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes) | ||
$.fn._scrollable = function(){ | ||
return this.map(function(){ | ||
var elem = this, | ||
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1; | ||
|
||
if( !isWin ) | ||
return elem; | ||
|
||
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem; | ||
|
||
return $.browser.safari || doc.compatMode == 'BackCompat' ? | ||
doc.body : | ||
doc.documentElement; | ||
}); | ||
}; | ||
|
||
$.fn.scrollTo = function( target, duration, settings ){ | ||
if( typeof duration == 'object' ){ | ||
settings = duration; | ||
duration = 0; | ||
} | ||
if( typeof settings == 'function' ) | ||
settings = { onAfter:settings }; | ||
|
||
if( target == 'max' ) | ||
target = 9e9; | ||
|
||
settings = $.extend( {}, $scrollTo.defaults, settings ); | ||
// Speed is still recognized for backwards compatibility | ||
duration = duration || settings.speed || settings.duration; | ||
// Make sure the settings are given right | ||
settings.queue = settings.queue && settings.axis.length > 1; | ||
|
||
if( settings.queue ) | ||
// Let's keep the overall duration | ||
duration /= 2; | ||
settings.offset = both( settings.offset ); | ||
settings.over = both( settings.over ); | ||
|
||
return this._scrollable().each(function(){ | ||
var elem = this, | ||
$elem = $(elem), | ||
targ = target, toff, attr = {}, | ||
win = $elem.is('html,body'); | ||
|
||
switch( typeof targ ){ | ||
// A number will pass the regex | ||
case 'number': | ||
case 'string': | ||
if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){ | ||
targ = both( targ ); | ||
// We are done | ||
break; | ||
} | ||
// Relative selector, no break! | ||
targ = $(targ,this); | ||
case 'object': | ||
// DOMElement / jQuery | ||
if( targ.is || targ.style ) | ||
// Get the real position of the target | ||
toff = (targ = $(targ)).offset(); | ||
} | ||
$.each( settings.axis.split(''), function( i, axis ){ | ||
var Pos = axis == 'x' ? 'Left' : 'Top', | ||
pos = Pos.toLowerCase(), | ||
key = 'scroll' + Pos, | ||
old = elem[key], | ||
max = $scrollTo.max(elem, axis); | ||
|
||
if( toff ){// jQuery / DOMElement | ||
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] ); | ||
|
||
// If it's a dom element, reduce the margin | ||
if( settings.margin ){ | ||
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0; | ||
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0; | ||
} | ||
|
||
attr[key] += settings.offset[pos] || 0; | ||
|
||
if( settings.over[pos] ) | ||
// Scroll to a fraction of its width/height | ||
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos]; | ||
}else{ | ||
var val = targ[pos]; | ||
// Handle percentage values | ||
attr[key] = val.slice && val.slice(-1) == '%' ? | ||
parseFloat(val) / 100 * max | ||
: val; | ||
} | ||
|
||
// Number or 'number' | ||
if( /^\d+$/.test(attr[key]) ) | ||
// Check the limits | ||
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max ); | ||
|
||
// Queueing axes | ||
if( !i && settings.queue ){ | ||
// Don't waste time animating, if there's no need. | ||
if( old != attr[key] ) | ||
// Intermediate animation | ||
animate( settings.onAfterFirst ); | ||
// Don't animate this axis again in the next iteration. | ||
delete attr[key]; | ||
} | ||
}); | ||
|
||
animate( settings.onAfter ); | ||
|
||
function animate( callback ){ | ||
$elem.animate( attr, duration, settings.easing, callback && function(){ | ||
callback.call(this, target, settings); | ||
}); | ||
}; | ||
|
||
}).end(); | ||
}; | ||
|
||
// Max scrolling position, works on quirks mode | ||
// It only fails (not too badly) on IE, quirks mode. | ||
$scrollTo.max = function( elem, axis ){ | ||
var Dim = axis == 'x' ? 'Width' : 'Height', | ||
scroll = 'scroll'+Dim; | ||
|
||
if( !$(elem).is('html,body') ) | ||
return elem[scroll] - $(elem)[Dim.toLowerCase()](); | ||
|
||
var size = 'client' + Dim, | ||
html = elem.ownerDocument.documentElement, | ||
body = elem.ownerDocument.body; | ||
|
||
return Math.max( html[scroll], body[scroll] ) | ||
- Math.min( html[size] , body[size] ); | ||
|
||
}; | ||
|
||
function both( val ){ | ||
return typeof val == 'object' ? val : { top:val, left:val }; | ||
}; | ||
|
||
})( jQuery ); |
Oops, something went wrong.