Timeline

by Niels Harbo

HTML

<header>
  <h1>Header</h1> 
</header>
<div class="nav-wrapper">
<nav>
<!--comments are used to remove whitesapce generated by linebreaks and indentation-->
     <a href="#11">11th Century</a><!--
  --><a href="#12">12th Century</a><!--
  --><a href="#13">13th Century</a><!--
  --><a href="#14">14th Century</a><!--
  --><a href="#16">16th Century</a><!--
  --><a href="#17">17th Century</a><!--
  --><a href="#18">18th Century</a><!--
  --><a href="#19">19th Century</a><!--
  --><a href="#20">20th Century</a><!--
  --><a href="#21">21st Century</a>
</nav>

</div>
<article class="timeline" id="11">
  <h2 class="timeline-century">11th Century</h2>
  <p class="timeline-year">1079</p>
  <p>The earliest recorded mention of Newbury was in the book ‘Ecclesiastical History of England and Normandy’. The town was granted the right to hold a fair and a market, this tradition still happens to this day.</p>
  <p class="timeline-year">1080</p>
  <p>Ernulph de Hesdin (1038-1097), a French knight who took part in the Norman Conquest was granted the manor of Newbury by William the Conqueror.</p>
  <p class="timeline-year">1086</p>
  <p>Newbury was recorded in the <a href="domesday-book">Domesday Book</a> as a town with 22 households in 1086.
    <br>
    <br> Speen (a village just outside and west of Newbury) also recorded in the Domesday Book, the village was built on the Roman settlement of 'Spinae'.</p>
</article>
<article class="timeline" id="12">
  <h2 class="timeline-century">12th Century</h2>
  <p class="timeline-year">1152</p>
  <p><a href="newbury-castle">Newbury Castle</a> was built by John Marshal, 4 miles west of Newbury in the village of Hamstead Marshall.</p>
</article>
<article class="timeline" id="13">
  <h2 class="timeline-century">13th Century</h2>
  <p class="timeline-year">1248</p>
  <p>On Ash Wednesday the <a href="newbury-tournament">Newbury Tournament</a> took place with King Henry III present and William de Valance taking part.</p>
</article>
<article...

CSS

*{
  box-sizing:border-box;
}
*:focus {outline:0;}
html,
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}
header{
  background:purple;
  padding:1rem;
  color:pink;
}
.nav-wrapper{
  position: -webkit-sticky;
  position: sticky;
  background:pink;
  top: 0;
  /*Users with crappy browsers will just have to scroll*/
}
nav{
  margin-bottom:-3rem;
}
nav a{
  display:inline-block;
  text-decoration:none;
  color:purple;
  padding:.4rem 0 .4rem 1rem;
  width:20%;
}
article{
  padding:1rem;
  margin-bottom:-3rem;
}
article h2{
  padding-top:3rem;
}

JavaScript

//The JavaScript is just for smoothscrolling and can be removed
//Source: https://css-tricks.com/snippets/jquery/smooth-scrolling/

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });