Permalink
Browse files

All afternoon to learn how scrollTo works with jquery

  • Loading branch information...
1 parent 66369cb commit f543dc452812d8aafdf0960a3e4af0c483bbbae4 @kuryaki committed Dec 18, 2012
View
@@ -751,18 +751,4 @@
_5grid.readyCheck();
});
-})();
-
-$(document).ready(function() {
-
- $('#nav').onePageNav({
- begin: function() {
- console.log('start');
- },
- end: function() {
- console.log('stop');
- },
- scrollOffset: 30
- });
-
-});
+})();

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,225 @@
+/**
+ * @depends jquery
+ * @name jquery.scrollto
+ * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
+ */
+
+/**
+ * jQuery Aliaser
+ */
+(function(window,undefined){
+ // Prepare
+ var jQuery, $, ScrollTo;
+ jQuery = $ = window.jQuery;
+
+ /**
+ * jQuery ScrollTo (balupton edition)
+ * @version 1.2.0
+ * @date July 9, 2012
+ * @since 0.1.0, August 27, 2010
+ * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
+ * @author Benjamin "balupton" Lupton {@link http://balupton.com}
+ * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://balupton.com}
+ * @license MIT License {@link http://creativecommons.org/licenses/MIT/}
+ */
+ ScrollTo = $.ScrollTo = $.ScrollTo || {
+ /**
+ * The Default Configuration
+ */
+ config: {
+ duration: 400,
+ easing: 'swing',
+ callback: undefined,
+ durationMode: 'each',
+ offsetTop: 0,
+ offsetLeft: 0
+ },
+
+ /**
+ * Configure ScrollTo
+ */
+ configure: function(options){
+ // Apply Options to Config
+ $.extend(ScrollTo.config, options||{});
+
+ // Chain
+ return this;
+ },
+
+ /**
+ * Perform the Scroll Animation for the Collections
+ * We use $inline here, so we can determine the actual offset start for each overflow:scroll item
+ * Each collection is for each overflow:scroll item
+ */
+ scroll: function(collections, config){
+ // Prepare
+ var collection, $container, container, $target, $inline, position,
+ containerScrollTop, containerScrollLeft,
+ containerScrollTopEnd, containerScrollLeftEnd,
+ startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
+ startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
+ scrollOptions,
+ callback;
+
+ // Determine the Scroll
+ collection = collections.pop();
+ $container = collection.$container;
+ container = $container.get(0);
+ $target = collection.$target;
+
+ // Prepare the Inline Element of the Container
+ $inline = $('<span/>').css({
+ 'position': 'absolute',
+ 'top': '0px',
+ 'left': '0px'
+ });
+ position = $container.css('position');
+
+ // Insert the Inline Element of the Container
+ $container.css('position','relative');
+ $inline.appendTo($container);
+
+ // Determine the top offset
+ startOffsetTop = $inline.offset().top;
+ targetOffsetTop = $target.offset().top;
+ targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop,10);
+
+ // Determine the left offset
+ startOffsetLeft = $inline.offset().left;
+ targetOffsetLeft = $target.offset().left;
+ targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft,10);
+
+ // Determine current scroll positions
+ containerScrollTop = container.scrollTop;
+ containerScrollLeft = container.scrollLeft;
+
+ // Reset the Inline Element of the Container
+ $inline.remove();
+ $container.css('position',position);
+
+ // Prepare the scroll options
+ scrollOptions = {};
+
+ // Prepare the callback
+ callback = function(event){
+ // Check
+ if ( collections.length === 0 ) {
+ // Callback
+ if ( typeof config.callback === 'function' ) {
+ config.callback.apply(this,[event]);
+ }
+ }
+ else {
+ // Recurse
+ ScrollTo.scroll(collections,config);
+ }
+ // Return true
+ return true;
+ };
+
+ // Handle if we only want to scroll if we are outside the viewport
+ if ( config.onlyIfOutside ) {
+ // Determine current scroll positions
+ containerScrollTopEnd = containerScrollTop + $container.height();
+ containerScrollLeftEnd = containerScrollLeft + $container.width();
+
+ // Check if we are in the range of the visible area of the container
+ if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
+ targetOffsetTopAdjusted = containerScrollTop;
+ }
+ if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
+ targetOffsetLeftAdjusted = containerScrollLeft;
+ }
+ }
+
+ // Determine the scroll options
+ if ( targetOffsetTopAdjusted !== containerScrollTop ) {
+ scrollOptions.scrollTop = targetOffsetTopAdjusted;
+ }
+ if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
+ scrollOptions.scrollLeft = targetOffsetLeftAdjusted;
+ }
+
+ // Perform the scroll
+ if ( $.browser.safari && container === document.body ) {
+ window.scrollTo(scrollOptions.scrollLeft, scrollOptions.scrollTop);
+ callback();
+ }
+ else if ( scrollOptions.scrollTop || scrollOptions.scrollLeft ) {
+ $container.animate(scrollOptions, config.duration, config.easing, callback);
+ }
+ else {
+ callback();
+ }
+
+ // Return true
+ return true;
+ },
+
+ /**
+ * ScrollTo the Element using the Options
+ */
+ fn: function(options){
+ // Prepare
+ var collections, config, $container, container;
+ collections = [];
+
+ // Prepare
+ var $target = $(this);
+ if ( $target.length === 0 ) {
+ // Chain
+ return this;
+ }
+
+ // Handle Options
+ config = $.extend({},ScrollTo.config,options);
+
+ // Fetch
+ $container = $target.parent();
+ container = $container.get(0);
+
+ // Cycle through the containers
+ while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
+ // Check Container for scroll differences
+ var scrollTop, scrollLeft;
+ scrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight;
+ scrollLeft = $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth;
+ if ( scrollTop || scrollLeft ) {
+ // Push the Collection
+ collections.push({
+ '$container': $container,
+ '$target': $target
+ });
+ // Update the Target
+ $target = $container;
+ }
+ // Update the Container
+ $container = $container.parent();
+ container = $container.get(0);
+ }
+
+ // Add the final collection
+ collections.push({
+ '$container': $(
+ ($.browser.msie || $.browser.mozilla) ? 'html' : 'body'
+ ),
+ '$target': $target
+ });
+
+ // Adjust the Config
+ if ( config.durationMode === 'all' ) {
+ config.duration /= collections.length;
+ }
+
+ // Handle
+ ScrollTo.scroll(collections,config);
+
+ // Chain
+ return this;
+ }
+ };
+
+ // Apply our jQuery Prototype Function
+ $.fn.ScrollTo = $.ScrollTo.fn;
+
+})(window);
View
@@ -0,0 +1,10 @@
+(function(){
+ var nav_links = $('#nav').children();
+ $.each(nav_links, function(i, link){
+ $(link).click(function(){
+ $($(this).attr("href")).ScrollTo(2400);
+ return false;
+ });
+ });
+})();
+//$('html, body').animate({scrollTop:600}, '600');
View
@@ -9,11 +9,8 @@ div#features-wrapper
img(src='images/pic01.jpg', alt='')
h2 Colombia y el emprendimiento digital
:markdown
- El Ministerio de Tecnologías de la Información y las Comunicaciones
- (Mintic) impulsa una cultura de emprendimiento virtual, a través de
- su programa Vive Digital. El desarrollo de software y aplicaciones
- para teléfonos inteligentes, juegos de video, publicidad y animaciones
- digitales, hacen parte de los focos de interés de este organismo.
+ El programa **Vive Digital** promueve el desarrollo de software y aplicaciones,
+ juegos de video, publicidad y animaciones digitales.
[Fuente: El espectador](http://bit.ly/R2sJSv)
div.3u
@@ -22,9 +19,9 @@ div#features-wrapper
img(src='images/pic02.jpg', alt='')
h2 Desarrolladores de software
:markdown
- This is a **Halcyonic** a free template that can
- include [links](http://www.google.com)
- so this kick _ass_ [badly](http://david.roncancio.me)
+ El desarrollo de software no tiene comparacion en el mercado actual de
+ las ofertas laborales en tecnologia. **Incluso sin ser Ingeniero**
+ [Fuente: dice](http://media.dice.com/report/october-2012-all-time-highs/)
div.3u
section
@@ -33,9 +30,7 @@ div#features-wrapper
h2 Continua Demanda
:markdown
Los desarrolladores recien graduados en ciudades como Boston, NY o San Francisco
- tienen salarios que empiezan desde los $75,000 dolares al año, y aquellos con mas experiencia
- estan ganando alrededor de $140,000 dolares en el mismo periodo, y los salarios en esta industria
- siguen aumentando en ese pais, casi en un 15 porciento en el año pasado
+ tienen salarios que empiezan desde los **$75,000** dolares al año
[Fuente: Boston Globe](http://b.globe.com/12wmyIR)
View
@@ -40,7 +40,7 @@ html(lang='en')
div.6u
:markdown
En la era de la informaci&oacute;n y la tecnolog&iacute;a son nuevas las habilidades
- que se requieren, esta el pa&iacute;s preparado para una nueva la nueva era digital?
+ que se requieren, ¿Est&aacute; el pa&iacute;s preparado para la nueva era digital?
a.button-big(href='#') Inscribete!
div.6u
@@ -49,9 +49,9 @@ html(lang='en')
block content
- script(src='css/5grid/jquery.js')
- script(src='css/5grid/jquery.scrollTo.js')
- script(src='css/5grid/jquery.nav.js')
+ script(src='js/jquery.js')
+ script(src='js/jquery.scrollTo.js')
+ script(src='js/main.js')
script(src='css/5grid/init.js?use=mobile,desktop,1000px&amp;mobileUI=1&amp;mobileUI.theme=none&amp;mobileUI.titleBarHeight=55&amp;mobileUI.openerWidth=75&amp;mobileUI.openerText=&lt;')
script(type='text/javascript')
var switchTo5x=true;

0 comments on commit f543dc4

Please sign in to comment.