I guess jquery is staying

2025-12-06 01:15:33 -06:00 · 2016-12-27 17:48:31 -05:00
parent 8ad2554b8c
commit f14f2865d9
6 changed files with 44 additions and 53 deletions
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -1,28 +1,28 @@
 - section: intro
  title: Intro
-  number: 1
+  number: 0

 - section: about
  title: About
-  number: 2
+  number: 1

 - section: services
  title: What I Do
-  number: 3
+  number: 2

 - section: skills
  title: Skills
-  number: 4
+  number: 3

 - section: experience
  title: Experience
-  number: 5
+  number: 4

 - section: portfolio
  title: Portfolio
-  number: 6
+  number: 5

 - section: contact
  title: Contact
-  number: 7
+  number: 6

--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -10,11 +10,13 @@
    {% endfor %}
  </ul>
 </nav>
+
 <div id="toggle" class="container">
  <span class="line top"></span>
  <span class="line middle"></span>
  <span class="line bottom"></span>
 </div>
+
 <div id="overlay" class="overlay">
  <div class="logo"><img class="logo-img" src="img/logo-white.png" alt="logo"><span>Brittany Chiang</span></div>
  <nav class="overlay-menu">
--- a/_scripts/main.js
+++ b/_scripts/main.js
@@ -1,57 +1,46 @@
 $(function() {
-  const contentSections = $('.section');
-  const navigationItems = $('#dot-nav a');
-  const overlayItems = $('#overlay a');
-
-  // ==================== VERTICAL NAV ON SCROLL ==================== //
-
-  updateNavigation();
-
-  $(window).on('scroll', function() {
-    updateNavigation();
-  });
-
-  //smooth scroll to the section
-  navigationItems.on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-  });
-
-  overlayItems.on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-    $('#toggle').click();
-  });
-
-  // smooth scroll to second section
-  $('.scroll-down').on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-  });
-
-  // close navigation on touch devices when selectinG an elemnt from the list
-  $('.touch #dot-nav a').on('click', function() {
-    $('.touch #dot-nav').removeClass('open');
-  });
-

  function updateNavigation() {
-    contentSections.each(function() {
-      const $this = $(this);
-      const activeSection = $('#dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
+    $('.section').each(function() {
+      const activeSection = $('#dot-nav a[href="#' + $(this).attr('id') + '"]').data('number');
+      const offsetTop = $(this).offset().top;
+      const halfWindowHeight = $(window).height() / 2;
+      const distanceFromTop = $(window).scrollTop();
+      const cond1 = offsetTop - halfWindowHeight < distanceFromTop;
+      const cond2 = offsetTop + $(this).height() - halfWindowHeight > distanceFromTop;

-      if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
-        navigationItems.eq(activeSection).addClass('is-selected');
+      if (cond1 && cond2) {
+        $('#dot-nav a').eq(activeSection).addClass('is-selected');
      } else {
-        navigationItems.eq(activeSection).removeClass('is-selected');
+        $('#dot-nav a').eq(activeSection).removeClass('is-selected');
      }
    });
  }

+  updateNavigation();
+  window.addEventListener('scroll', updateNavigation);
+
+
  function smoothScroll(target) {
-    $('body,html').animate({ 'scrollTop': target.offset().top + 50 }, 600);
+    $('body').animate({ 'scrollTop': target.offset().top + 50 }, 500);
  }

+  $('.scroll-down').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+  });
+
+  $('#dot-nav a').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+  });
+
+  $('#overlay a').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+    $('#toggle').click();
+  });
+
 });


@@ -161,6 +150,6 @@ const limit = 300;
 function autoExpand() {
  textarea.style.height = "";
  textarea.style.height = `${Math.min(textarea.scrollHeight, limit)}px`;
-};
+}

 textarea.addEventListener('input', autoExpand);
--- a/_scss/partials/_dotNav.scss
+++ b/_scss/partials/_dotNav.scss
@@ -20,7 +20,7 @@
  a {
    display: inline-block;
    @include clearfix;
-    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
    span {
      float: right;
      display: inline-block;
--- a/css/main.css
+++ b/css/main.css
--- a/js/main.js
+++ b/js/main.js
@@ -1 +1 @@
-"use strict";function handleDotNav(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,o=window.scrollY>e;t&&o?dotNav.classList.add("active"):dotNav.classList.remove("active")}function switchNavs(){var t=window.innerWidth>768,e=overlay.classList.contains("open");t?(dotNav.classList.add("active"),e&&(hamburger.classList.remove("active"),overlay.classList.remove("open"))):dotNav.classList.remove("active")}function toggleMenu(){this.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){o.each(function(){var t=$(this),e=$('#dot-nav a[href="#'+t.attr("id")+'"]').data("number")-1;t.offset().top-$(window).height()/2<$(window).scrollTop()&&t.offset().top+t.height()-$(window).height()/2>$(window).scrollTop()?n.eq(e).addClass("is-selected"):n.eq(e).removeClass("is-selected")})}function e(t){$("body,html").animate({scrollTop:t.offset().top+50},600)}var o=$(".section"),n=$("#dot-nav a"),i=$("#overlay a");t(),$(window).on("scroll",function(){t()}),n.on("click",function(t){t.preventDefault(),e($(this.hash))}),i.on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()}),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$(".touch #dot-nav a").on("click",function(){$(".touch #dot-nav").removeClass("open")})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section");window.addEventListener("scroll",handleDotNav);var hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("resize",switchNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand);
+"use strict";function handleDotNav(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,n=window.scrollY>e;t&&n?dotNav.classList.add("active"):dotNav.classList.remove("active")}function switchNavs(){var t=window.innerWidth>768,e=overlay.classList.contains("open");t?(dotNav.classList.add("active"),e&&(hamburger.classList.remove("active"),overlay.classList.remove("open"))):dotNav.classList.remove("active")}function toggleMenu(){this.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){$(".section").each(function(){var t=$('#dot-nav a[href="#'+$(this).attr("id")+'"]').data("number"),e=$(this).offset().top,n=$(window).height()/2,o=$(window).scrollTop(),i=e-n<o,a=e+$(this).height()-n>o;i&&a?$("#dot-nav a").eq(t).addClass("is-selected"):$("#dot-nav a").eq(t).removeClass("is-selected")})}function e(t){$("body").animate({scrollTop:t.offset().top+50},500)}t(),window.addEventListener("scroll",t),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#dot-nav a").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#overlay a").on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section");window.addEventListener("scroll",handleDotNav);var hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("resize",switchNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand);