From ccdcb57b8a517b26a7ee1cbb8a160cf1d4a81d9f Mon Sep 17 00:00:00 2001
From: David Miller <hello@davidmiller.io>
Date: Sat, 19 Aug 2017 17:01:59 -0400
Subject: [PATCH] Added js-scroll-trigger class to prevent conflicts with
 scrollable links and other components

---
 index.html       | 56 ++++++++++++++++++++++++++++++++----------------
 js/agency.js     | 12 +++++------
 js/agency.min.js |  2 +-
 js/contact_me.js |  6 +++---
 4 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index ab76d14..a9e50c0 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
       <div class="container">
-        <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
+        <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           Menu
           <i class="fa fa-bars"></i>
@@ -38,19 +38,19 @@
         <div class="collapse navbar-collapse" id="navbarResponsive">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
-              <a class="nav-link" href="#services">Services</a>
+              <a class="nav-link js-scroll-trigger" href="#services">Services</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#portfolio">Portfolio</a>
+              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#about">About</a>
+              <a class="nav-link js-scroll-trigger" href="#about">About</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#team">Team</a>
+              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#contact">Contact</a>
+              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
             </li>
           </ul>
         </div>
@@ -63,11 +63,29 @@
         <div class="intro-text">
           <div class="intro-lead-in">Welcome To Our Studio!</div>
           <div class="intro-heading">It's Nice To Meet You</div>
-          <a href="#services" class="btn btn-xl">Tell Me More</a>
+          <a class="btn btn-xl js-scroll-trigger" href="#services">Tell Me More</a>
         </div>
       </div>
     </header>
 
+    <section>
+      <div class="container">
+        <p>
+          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+            Link with href
+          </a>
+          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+            Button with data-target
+          </button>
+        </p>
+        <div class="collapse" id="collapseExample">
+          <div class="card card-body">
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Services -->
     <section id="services">
       <div class="container">
@@ -117,84 +135,84 @@
         </div>
         <div class="row">
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Threads</h4>
               <p class="text-muted">Illustration</p>
             </div>
           </div>
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Explore</h4>
               <p class="text-muted">Graphic Design</p>
             </div>
           </div>
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Finish</h4>
               <p class="text-muted">Identity</p>
             </div>
           </div>
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Lines</h4>
               <p class="text-muted">Branding</p>
             </div>
           </div>
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Southwest</h4>
               <p class="text-muted">Website Design</p>
             </div>
           </div>
           <div class="col-md-4 col-sm-6 portfolio-item">
-            <div class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
+            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
               <div class="portfolio-hover">
                 <div class="portfolio-hover-content">
                   <i class="fa fa-plus fa-3x"></i>
                 </div>
               </div>
               <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="">
-            </div>
+            </a>
             <div class="portfolio-caption">
               <h4>Window</h4>
               <p class="text-muted">Photography</p>
diff --git a/js/agency.js b/js/agency.js
index 17089b3..2561fc4 100644
--- a/js/agency.js
+++ b/js/agency.js
@@ -2,7 +2,7 @@
   "use strict"; // Start of use strict
 
   // Smooth scrolling using jQuery easing
-  $('a[href*="#"]:not([href="#"])').click(function() {
+  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
@@ -15,17 +15,17 @@
     }
   });
 
+  // Closes responsive menu when a scroll trigger link is clicked
+  $('.navbar .js-scroll-trigger').click(function() {
+    $('.navbar-collapse').collapse('hide');
+  });
+
   // Activate scrollspy to add active class to navbar items on scroll
   $('body').scrollspy({
     target: '#mainNav',
     offset: 54
   });
 
-  // Closes responsive menu when a link is clicked
-  $('.navbar-collapse>ul>li>a').click(function() {
-    $('.navbar-collapse').collapse('hide');
-  });
-
   // Collapse the navbar when page is scrolled
   $(window).scroll(function() {
     if ($("#mainNav").offset().top > 100) {
diff --git a/js/agency.min.js b/js/agency.min.js
index c45909c..2e0ed47 100644
--- a/js/agency.min.js
+++ b/js/agency.min.js
@@ -3,4 +3,4 @@
  * Copyright 2013-2017 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
  */
-!function(a){"use strict";a('a[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var n=a(this.hash);if((n=n.length?n:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:n.offset().top-54},1e3,"easeInOutExpo"),!1}}),a("body").scrollspy({target:"#mainNav",offset:54}),a(".navbar-collapse>ul>li>a").click(function(){a(".navbar-collapse").collapse("hide")}),a(window).scroll(function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")})}(jQuery);
\ No newline at end of file
+!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=a(this.hash);if((e=e.length?e:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:e.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".navbar .js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54}),a(window).scroll(function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")})}(jQuery);
\ No newline at end of file
diff --git a/js/contact_me.js b/js/contact_me.js
index 5323770..6e91590 100644
--- a/js/contact_me.js
+++ b/js/contact_me.js
@@ -51,9 +51,9 @@ $(function() {
           //clear all fields
           $('#contactForm').trigger("reset");
         },
-        complete: function () {
-             setTimeout(function () {
-             $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
+        complete: function() {
+          setTimeout(function() {
+            $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
           }, 1000);
         }
       });