#HTML5 History API

by mtambulut

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="demo-top-bar">

  <div id="demo-bar-inside">

    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>

    <div id="demo-bar-buttons">
      <a class='header-button' href='#'>&larr; Back to Article</a>    </div>

  </div>

</div>
    <div class="page-wrap">
        <div class="gallery">
            <a href="/peter.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/bill.png" alt="Peter" class="peter" data-name="peter"/>
            </a>
            <a href="/ray.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/dan.png" alt="Ray" class="ray" data-name="ray"/>
            </a>
            <a href="/egon.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/egon.png" alt="Egon" class="egon" data-name="egon"/>
            </a>
            <a href="/winston.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/winston.png" alt="Winston" class="winston" data-name="winston">
            </a>
        </div>

        <p class="selected">Ghostbusters</p>
        <p class="highlight"></p>

        <div class="content"></div>
    </div>

CSS

* {
    box-sizing: border-box;
}

body, html {
    min-height: 800px;
    height: 100%;
}

.page-wrap {
    height: 100%;
    height: calc(100% - 82px);
    margin: 0;
    padding: 0 0 40px 0;
    background-color: #333;
    font-family: "Georgia", sans-serif;
    text-align: center;
    border: 15px solid #222;
    border-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-font-smoothing: antialiased;
}

.ray {
    -webkit-filter: grayscale(100%) brightness(1) contrast(140%);
    filter: grayscale(100%) brightness(1) contrast(140%);
}

.gallery {
    min-height: 300px;
}
.gallery:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.gallery a {
    color: transparent;
}
img {
    transition: all .3s ease;
    border-radius: 100%;
    margin-right: 20px;
    margin-bottom: 10px;
    border: 20px solid transparent;
    -webkit-filter: grayscale(100%);
    width: 150px;
    height: 150px;
    margin-bottom: 0;
}

@media screen and (min-width: 600px){
    img {
        width: 200px;
        height: 200px;
    }
}
p {
    color: white;
    font-size: 18px;
}

.selected {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .8px;
    color: #666;
    font-weight: bold;
}

a {
    color: #777;
}

small {
    text-align: center;
    display: block;
}

h1 {
    color: white;
}

.content {
    text-align: left;
    line-height: 1.5;
    max-width: 750px;
    padding: 0 20px;
    margin: 0 auto;
}

.content p {
    color: white;
    font-size: 18px;
    line-height: 1.5;
}

.current {
    -webkit-filter: grayscale(0) brightness(1.2);
    filter: grayscale(0) brightness(1.2) ;
}

.current:hover {
    -webkit-filter: grayscale(0) brightness(1.4);
    filter: grayscale(0) brightness(1.4);
}

img:hover {
    cursor: pointer;
    -webkit-filter: grayscale(100%) brightness(1.4);
    filter:...

JavaScript

(function(){

  "use strict";

  var container = document.querySelector('.gallery'),
    imgs = document.querySelectorAll('img'),
    textWrapper = document.querySelector('.highlight'),
    content = document.querySelector('.content'),
    defaultTitle = "Select your Ghostbuster!";

  function updateText(content){
    textWrapper.innerHTML = content;
  }

  function requestContent(file){
    $('.content').load(file + ' .content');
  }

  function removeCurrentClass(){
    for(var i = 0; i < imgs.length; i++){
      imgs[i].classList.remove('current');
    }
  }

  function addCurrentClass(elem){
    removeCurrentClass();
    var element = document.querySelector("." + elem);
    element.classList.add('current');
  }

  container.addEventListener('click', function(e){
    if(e.target != e.currentTarget){
      e.preventDefault();
      var data = e.target.getAttribute('data-name'),
        url = data + ".php";
      addCurrentClass(data);
      history.pushState(data, null, url);
      updateText(data);
      requestContent(url);
      document.title = "Ghostbuster | " + data;
    }
    e.stopPropagation();
  }, false);


  window.addEventListener('popstate', function(e){
    var character = e.state;

    if (character == null) {
      removeCurrentClass();
      textWrapper.innerHTML = " ";
      content.innerHTML = " ";
      document.title = defaultTitle;
    } else {
      updateText(character);
      requestContent(character + ".php");
      addCurrentClass(character);
      document.title = "Ghostbuster | " + character;
    }
  })
})();