window.history.pushState Implementation

by Swiftaxe

HTML

<h1>VoiceOver Testing History API <span></span></h1>
    <h2>Current Page: <span>/</span></h2>
    <ul id="menu-nav">
        <li><a href="/page-1/" title="Pagina 1">Page 1</a></li>
        <li><a href="/page-2/" title="Pagina 2">Page 2</a></li>
        <li><a href="/page-3/" title="Pagina 3">Page 3</a></li>
    </ul>

CSS

body {margin:10px; background: #999; color: white }
h1 {font-size:20px}
a {
    display: block;
    padding: 16px 10px;
    height: 24px;
    background: white;
    color: #666;
    text-align: center;
    margin: 15px;
    float: left;
    text-decoration: none
}

a:visited {
    color: #666;
}
}

JavaScript

// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
    console.log(window.history.length);
    $('h2 span').html(url || "/");
    $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
    
    switch(url) {
        case '/page-1/':
            setBgColor('#DD577A');
            break;
        case '/page-2/':
            setBgColor('#FE5A27');
            break;
        case '/page-3/':
            setBgColor('#49AEC0');
            break;

    }
};

var setBgColor = function(color) {
    console.log('bgcolor'+color);
	$('body').css('background', color);    
}

$('#menu-nav a').click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr('href'),
        targetTitle = $(this).attr('title');
    
    $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);
    
    window.history.replaceState({url: "" + targetUrl + ""}, targetTitle, targetUrl);
    setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
    
    $("#menu-nav a").fadeTo('fast', 1.0);
    setCurrentPage(e.state ? e.state.url : null);

};