History example

by destrada

HTML

<p class="url-bar"></p>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<p>You have selected <span>no color</span></p>

SCSS

p.url-bar {
  padding: 1rem;
  border: 1px solid black;
}

div {
    display: inline-block;
    width: 75px;
    height: 75px;
    cursor: pointer;
    &.red {
        background-color: red;
    }
    &.green {
        background-color: green;
    }
    &.blue {
        background-color: blue;
    }
}

JavaScript

window.selectedColor = "";

function selectColor(color) {    
    window.selectedColor = color;
    $('p span').text(color);
};

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;
    
    history.pushState(state, title, path);
};

$('div').on('click', function() {
    var color = $(this).attr('class');
    
    selectColor(color);
    doPushState(color);
    updateUrlBar();
});

// ignore this part - we're just faking the URL bar here, because
// you can't see the URL changing in jsfiddles frameset

function updateUrlBar() {
	$('.url-bar').text(document.location);
};

$(window).on('popstate', function(event) { 
    updateUrlBar();
});

updateUrlBar();