Skip to content

Commit da80389

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Added active link detection and scrolling.
Need to fix detection on desktops as events and chapters are next to each other and it confuses javascript.
1 parent f120c0b commit da80389

File tree

3 files changed

+127
-37
lines changed

3 files changed

+127
-37
lines changed

‎_includes/navigation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@
5252
<div class="collapse navbar-collapse" id="navbarToggler">
5353
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
5454
<li class="nav-item active">
55-
<a class="navigation__link active nav-link" href="{{ '/' | prepend: site.baseurl }}">Home<span class="sr-only">(current)</span></a>
55+
<a class="navigation__link active nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
5656
</li>
5757
<li class="hide-on-desktop nav-item">
58-
<a class="navigation__link nav-link" href="#upcoming">Events</a>
58+
<a class="navigation__link nav-link" href="#events">Events</a>
5959
</li>
6060
<li class="hide-on-desktop nav-item">
6161
<a class="navigation__link nav-link" href="#chapters">Chapters</a>

‎index.html‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
11
---
22
---
3-
<div class="navigation__content container-fluid">
4-
<picture>
5-
<!--<source srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w,-->
6-
<!--static/images/title_photo/title_glass_building_960x540.jpg 960w,-->
7-
<!--static/images/title_photo/title_glass_building_1334x750.jpg 1334w,-->
8-
<!--static/images/title_photo/title_glass_building_1920x1080.jpg 1920w,-->
9-
<!--static/images/title_photo/title_glass_building_2562x1442.jpg 2562w,-->
10-
<!--static/images/title_photo/title_glass_building_3840x2160.jpg 3840w"-->
11-
<!--media="(orientation: landscape)"-->
12-
<!--sizes="100vw">-->
13-
<!--<source srcset="static/images/title_photo/title_glass_building_750x1334.jpg 750w,-->
14-
<!--static/images/title_photo/title_glass_building_1080x1920.jpg 1080w,-->
15-
<!--static/images/title_photo/title_glass_building_1125x2436.jpg 1125w,-->
16-
<!--static/images/title_photo/title_glass_building_1242x2436.jpg 1242w,-->
17-
<!--static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"-->
18-
<!--media="(orientation: portrait)"-->
19-
<!--sizes="100vw">-->
20-
<img class="navigation__background-img"
21-
src="static/images/title_photo/Python_Sprints_title_2048x1152px.jpg"
22-
alt="Python Sprints Title Image">
23-
</picture>
3+
<section id="home">
4+
<div class="navigation__content container-fluid">
5+
<picture>
6+
<!--<source srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w,-->
7+
<!--static/images/title_photo/title_glass_building_960x540.jpg 960w,-->
8+
<!--static/images/title_photo/title_glass_building_1334x750.jpg 1334w,-->
9+
<!--static/images/title_photo/title_glass_building_1920x1080.jpg 1920w,-->
10+
<!--static/images/title_photo/title_glass_building_2562x1442.jpg 2562w,-->
11+
<!--static/images/title_photo/title_glass_building_3840x2160.jpg 3840w"-->
12+
<!--media="(orientation: landscape)"-->
13+
<!--sizes="100vw">-->
14+
<!--<source srcset="static/images/title_photo/title_glass_building_750x1334.jpg 750w,-->
15+
<!--static/images/title_photo/title_glass_building_1080x1920.jpg 1080w,-->
16+
<!--static/images/title_photo/title_glass_building_1125x2436.jpg 1125w,-->
17+
<!--static/images/title_photo/title_glass_building_1242x2436.jpg 1242w,-->
18+
<!--static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"-->
19+
<!--media="(orientation: portrait)"-->
20+
<!--sizes="100vw">-->
21+
<img class="navigation__background-img"
22+
src="static/images/title_photo/Python_Sprints_title_2048x1152px.jpg"
23+
alt="Python Sprints Title Image">
24+
</picture>
2425

25-
<div class="navigation__title-container row container-fluid">
26-
<div class="col-md-12">
27-
<img class="navigation__site-logo"
28-
srcset="static/images/site_logo/python_sprints_logo_triangles_light_text_480x245px.png 480w,
29-
static/images/site_logo/python_sprints_logo_triangles_light_text_960x489px.png 960w,
30-
static/images/site_logo/python_sprints_logo_triangles_light_text_1920x978px.png 1920w,
31-
"
32-
sizes="100vw"
33-
src="static/images/site_logo/python_sprints_logo_triangles_light_text_960x489px.png"
34-
alt="Python Sprints Logo">
35-
<h2 class="navigation__subtitle">All About Open Source</h2>
26+
<div class="navigation__title-container row container-fluid">
27+
<div class="col-md-12">
28+
<img class="navigation__site-logo"
29+
srcset="static/images/site_logo/python_sprints_logo_triangles_light_text_480x245px.png 480w,
30+
static/images/site_logo/python_sprints_logo_triangles_light_text_960x489px.png 960w,
31+
static/images/site_logo/python_sprints_logo_triangles_light_text_1920x978px.png 1920w,
32+
"
33+
sizes="100vw"
34+
src="static/images/site_logo/python_sprints_logo_triangles_light_text_960x489px.png"
35+
alt="Python Sprints Logo">
36+
<h2 class="navigation__subtitle">All About Open Source</h2>
37+
</div>
3638
</div>
3739
</div>
38-
</div>
39-
<div id="upcoming" class="upcoming-chapters-container container-fluid">
40+
</section>
41+
<div class="upcoming-chapters-container container-fluid">
4042
<div class="row">
4143
{% include events_array_generator.html future_events = true %}
4244
{% if posts.size > 0 %}
@@ -49,7 +51,7 @@ <h2 class="navigation__subtitle">All About Open Source</h2>
4951
{% if upcoming_event == true %}
5052
<div class="col-lg-6 no-padding-x">
5153
<!--Upcoming Events section-->
52-
<section class="upcoming">
54+
<section id="events" class="upcoming">
5355
<div class="row container-fluid">
5456
<div class="col-md-12 no-padding-x">
5557
<h2 class="upcoming__title">Events</h2>

‎static/js/site.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,94 @@ $(document).ready(function () {
1414
buttonOpenContainer.on("click", openNav);
1515
navigationButtonClose.on("click", closeNav);
1616
});
17+
18+
19+
// Code for active links and scrolling
20+
$(document).ready(function() {
21+
$(".navbar-nav .nav-item .nav-link").on("click", function(){
22+
$(".navbar-nav").find(".active").removeClass("active");
23+
$(this).addClass("active");
24+
});
25+
26+
// Automatic navigation active state.
27+
var sections = $('section'),
28+
nav = $('nav'),
29+
nav_height = nav.outerHeight();
30+
31+
$(window).on('scroll', function () {
32+
var cur_pos = $(this).scrollTop();
33+
34+
sections.each(function() {
35+
var top = $(this).offset().top - nav_height - 85,
36+
bottom = top + $(this).outerHeight();
37+
38+
if (cur_pos >= top && cur_pos <= bottom) {
39+
nav.find('a').removeClass('active');
40+
sections.removeClass('active');
41+
42+
$(this).addClass('active');
43+
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
44+
}
45+
});
46+
});
47+
48+
// Select all links with hashes
49+
$('a[href*="#"]')
50+
// Remove links that don't actually link to anything
51+
.not('[href="#"]')
52+
.not('[href="#0"]')
53+
.click(function (event) {
54+
// On-page links
55+
if (
56+
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
57+
&&
58+
location.hostname == this.hostname
59+
) {
60+
// Figure out element to scroll to
61+
var target = $(this.hash);
62+
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
63+
// Does a scroll target exist?
64+
if (target.length) {
65+
// Only prevent default if animation is actually gonna happen
66+
event.preventDefault();
67+
$('html, body').animate({
68+
scrollTop: target.offset().top
69+
}, 1000, function () {
70+
// Callback after animation
71+
// Must change focus!
72+
var $target = $(target);
73+
$target.focus();
74+
if ($target.is(":focus")) { // Checking if the target was focused
75+
return false;
76+
} else {
77+
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
78+
$target.focus(); // Set focus again
79+
}
80+
});
81+
}
82+
}
83+
});
84+
});
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+
95+
96+
97+
98+
99+
100+
101+
102+
103+
104+
17105

18106
function stopBodyScrolling (bool) {
19107
/**

0 commit comments

Comments
 (0)