The Issue
Smoothstate.js keeps the <head> of the page that I was just on and injects it back into the home page when I navigate back to index.html.
For example: I click a link that takes me to proj1.html Then I want to leave that page by clicking the home link which directs back to index.html. Page directs back to home but the layout is broken because the home page <head> contains the contents from <head> of proj1.html..Thus making all my styles are broken on the home page.
Smoothstate is caching the <head> and I am not sure how to prevent this from happening...
I tried using the cache clearing method they have but no success. smoothState.clear();
Here is my JS
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 0,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onStart: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
Fixed. The
<head>loading issue was caused by not adding the appropriate classes to$pageobject.#maincontains all the content I wanted to fade.headis our<head>element that contains all styles.bodyentire body of the page.var $page = $('#main','head','body')