Skip to content

Instantly share code, notes, and snippets.

@apathetic
Created May 21, 2012 06:06
Show Gist options
  • Save apathetic/2760702 to your computer and use it in GitHub Desktop.
Save apathetic/2760702 to your computer and use it in GitHub Desktop.
jQuery: jump nav
/*
* scroll navigation
* parses html for data-nav and construct smoothly-scrolling menu
*/
/* old stuff....
// scroll navigation
$.fn.jumpy = function (argument) {
// Navigation
$('.jump').click(function(e){
e.preventDefault();
var to = $(this).attr('href');
if(to=='#') to = 0;
$(window).scrollTo(to,500);
});
// Define sections
var now, active = 'top';
deliver = $('#deliver').offset().top;
who = $('#who').offset().top;
clients = $('#clients').offset().top;
contact = $('#contact').offset().top;
$(window).scroll(function(){
var offset = $(window).scrollTop();
if (offset < deliver) { now = 'home'; }
else if (offset >= contact) { now = 'contact'; }
else if (offset >= clients) { now = 'clients'; }
else if (offset >= who) { now = 'who'; }
else { now = 'deliver'; }
if (now != active) {
$('nav a').removeClass('active');
$('nav a[href=#'+now+']').addClass('active');
active = now;
}
});
}
*/
// -------------
// sample js
// -------------
var JumpyNav = (function(options){
var settings = { };
var _body = $('body');
var _window = $(window);
var _scroll = ($.browser.mozilla || $.browser.msie) ? $('html') : _body;
var _mobile = (_body.hasClass('webkit-mobile')
|| (navigator.userAgent.match(/iPhone/i))
|| (navigator.userAgent.match(/iPod/i))
|| (navigator.userAgent.match(/iPad/i)));
var _unsupported = false; // _body.hasClass('unsupported-browser');
function makeNavigation() {
var sections = $('[data-nav]');
var active = 0;
if (!_mobile && !_unsupported) {
sections.each(function(i, section) {
$('<a/>')
.appendTo('nav')
.prop('href', '#/' + $(section).data('nav') )
.html( $(section).data('nav') )
.bind('click', function(e) {
e.preventDefault();
console.log('nav clickededed');
_body.triggerHandler('scrollTo', $(section).prop('id') );
});
});
}
_body
.bind('sectionEnter', function(e, id) {
sections.each( function(i) {
if ( $(this).prop('id')==id ) { active = i; }
});
})
.bind('keyRight', function(e) {
console.log('binding right');
active++;
if ( _active > sections.length-1 ) { active = sections.length-1; }
_seek();
})
.bind('keyLeft', function(e) {
active--;
if (active<0) { active=0; }
_seek();
});
function _seek() {
_body.triggerHandler('scrollTo', sections[active].prop('id'))
}
};
function makeScroll() {
_body.bind('scrollTo', function(e, id) {
console.log('scrolling to: '+id);
var element = $('#'+id),
header = element.find('header'),
align = element.data('align'),
// offset = element.prop('data-scrolloffset') ? parseInt(element.prop('data-scrolloffset')) : 50,
top = element.offset().top;
if (header.length>0 && align!="top") {
top = header.offset().top + header.height()/2 - $.Window.height() / 2;
if (top > header.offset().top)
top = header.offset().top - 50
}
if (align=="center" && element.height() > _window.height()) {
top = element.offset().top + (element.height() - _window.height()) / 2;
}
_scroll.stop().animate({ 'scrollTop': top }, 800, 'easeInOutQuart' );
});
};
function bindKeys() {
$(document).bind('keydown',function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
switch(key) {
// case 38: //top
// _body.triggerHandler('keyUp');
// break;
// case 40: ///bottom
// _body.triggerHandler('keyDown');
// break;
case 39: //right
_body.triggerHandler('keyRight');
break;
case 37: //left
_body.triggerHandler('keyLeft');
break;
}
});
}
return {
nav: function(options) {
if (! (this instanceof arguments.callee)) {
return new arguments.callee(arguments);
}
console.log('jumpy.nav');
if (options) $.extend(settings, options);
makeNavigation();
makeScroll();
bindKeys();
}
}
});
var jumpy = new JumpyNav();
// -------------
// easing plugin
// -------------
(function($) {
// easing
$.extend($.easing,{def:"easeOutQuad",swing:function(x,t,b,c,d){return $.easing[$.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return -c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t+b;}return -c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t+b;}return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t+b;}return -c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t*t+b;}return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return -c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return -c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return (t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return (t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0){return b;}if(t==d){return b+c;}if((t/=d/2)<1){return c/2*Math.pow(2,10*(t-1))+b;}return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return -c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1){return -c/2*(Math.sqrt(1-t*t)-1)+b;}return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic: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*0.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-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic: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*0.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;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0){return b;}if((t/=d/2)==2){return b+c;}if(!p){p=d*(0.3*1.5);}if(a<Math.abs(c)){a=c;var s=p/4;}else{var s=p/(2*Math.PI)*Math.asin(c/a);}if(t<1){return -0.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;}return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*0.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}if((t/=d/2)<1){return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;}return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-$.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else{if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+0.75)+b;}else{if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b;}}}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2){return $.easing.easeInBounce(x,t*2,0,c,d)*0.5+b;}return $.easing.easeOutBounce(x,t*2-d,0,c,d)*0.5+c*0.5+b;}});
/* jQuery.ScrollTo - Easy element scrolling using jQuery | Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com */
var m=$.scrollTo=function(b,c,g){$(window).scrollTo(b,c,g)};m.defaults={axis:'y',duration:1};m.window=function(b){return $(window).scrollable()};$.fn.scrollable=function(){return this.map(function(){var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;return c.nodeName=='IFRAME'||i&&$.browser.safari?g.body:i?g.documentElement:this})};$.fn.scrollTo=function(r,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};a=$.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=$(k),d=r,l,e={},p=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(d)){d=n(d);break}d=$(d,this);case'object':if(d.is||d.style)l=(d=$(d)).offset()}$.each(a.axis.split(''),function(b,c){var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();if(l){e[f]=l[i]+(p?0:s-o.offset()[i]);if(a.margin){e[f]-=parseInt(d.css('margin'+g))||0;e[f]-=parseInt(d.css('border'+g+'Width'))||0}e[f]+=a.offset[i]||0;if(a.over[i])e[f]+=d[v]()*a.over[i]}else e[f]=d[i];if(/^\d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));if(!b&&a.queue){if(s!=e[f])q(a.onAfterFirst);delete e[f]}});q(a.onAfter);function q(b){o.animate(e,j,a.easing,b&&function(){b.call(this,r,a)})};function u(b){var c='scroll'+b,g=k.ownerDocument;return p?Math.max(g.documentElement[c],g.body[c]):k[c]}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment