I'm looking at a demo done by Codyhouse (article | demo) that uses loadNewContent() to bring in content from another HTML file. Everything functions perfectly, however, the URL stays the same, always as /index.html.
I've been tweaking the JS to try make it so that the page URL updates along with the content, but have been unsuccessful in doing so. I've tried using replace() but keep getting stuck in a loop... or removing some pieces of the code and it doesn't work at all.
Any ideas as to which route I should go to make this work? I want it to function as is, but if you click 'About' I want the page URL to be /about.html, etc.
function loadNewContent(newSection) {
//create a new section element and insert it into the DOM
var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
//load the new content from the proper html file
section.load(newSection+'.html .cd-section > *', function(event){
//add the .cd-selected to the new section element -> it will cover the old one
section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//close navigation
toggleNav(false);
});
section.prev('.cd-selected').removeClass('cd-selected');
});
$('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//once the navigation is closed, remove the old section from the DOM
section.prev('.cd-section').remove();
});
if( $('.no-csstransitions').length > 0 ) {
//detect if browser supports transitions
toggleNav(false);
section.prev('.cd-section').remove();
}
I'm familiar with JS, but not a developer... so any help is GREATLY appreciated!!