titzi
/
anmeldeportal_hochzeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Added js-scroll-trigger class to prevent conflicts with scrollable links and other components

master
David Miller 8 years ago
parent
f130d4b295
commit
ccdcb57b8a
4 changed files with 47 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      index.html
  2. 12
      js/agency.js
  3. 2
      js/agency.min.js
  4. 6
      js/contact_me.js

56
index.html
Unescape View File

@ -30,7 +30,7 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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>

12
js/agency.js
Unescape View File

@ -2,7 +2,7 @@ @@ -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 @@ @@ -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) {

2
js/agency.min.js vendored
Unescape View File

@ -3,4 +3,4 @@ @@ -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);
!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);

6
js/contact_me.js
Unescape View File

@ -51,9 +51,9 @@ $(function() { @@ -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);
}
});

Write Preview
Loading…
Cancel
Save