Answer 1 - Get the title working when going forward and backward
As far as I understood you want to change the document title html from the link is loaded in a div. When you're loading a file in a div via jQuery .load you're just inserting the complete response text after an ajax request in it. So with all the stuff which shouldn't be in a div like the title or meta tag. However the title of the current document (http://bramvanroy.be/sectionLoaderTest/index.html) is defined in the title which is inside the head tag and not in the title tag inside a div so that's why the document title doesn't change.
So how can I fix it?
Good question, because the title element inside a div element is invalid, most browsers will remove it so you can't just use this:
document.title = $("#sectionContainer title").text();
because the title element may not exist.
So what we need is the direct response from the jQuery .load function. I can get it by adding the callback argument to the function:
$("#sectionContainer")
.hide()
.load(newLoadedHtml, function(responseText) {
document.title = $(responseText).filter("title").text();
})
.fadeIn("fast");
What you may not understand is why I use the .filter and not the .find function. This is because jQuery is kind of parsing html, head and body tags out of the html but not removing there child elements.
Answer 2 - Optimize the load time of the mainpage
A document is getting loaded from to top to the bottom.
So first of all the css, JavaScript etc. should be loaded and then the the main document.
Because jQuery is always waiting for the document before it's executing it wouldn't be a very bad idea to put all your script elements right before the end of the body, so that your HTML can be loaded before.
BtW I just had this problem at the first time after that everything was cached and the document was loading very fast.
Answer 3 - Fix the active-class when going forward and backward
I would say loop trough the href attributes of the a elements and compare it with the data from History.getState(). Should be easy.
You did some mistakes in your code - Your fixed code:
You appended the hash #content to all URLs.. it doesn't make sense and it will be removed by jQuery again: https://github.com/jquery/jquery/blob/master/src/ajax.js#L617 (Comes from lines: 158, 190, 337, 617 - rhash is on line 6)
$(document).ready(function () {
var firstLink = $("ul > li:first-child > a");
var menuLink = $("ul > li > a");
var firstLoadedHtml = firstLink.attr("href");
$("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
firstLink.addClass("active");
menuLink.click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var newLoadedHtml = $(this).attr("href");
History.pushState(null, newLoadedHtml, newLoadedHtml);
$("#sectionContainer")
.hide()
.load(newLoadedHtml, function(responseText) {
document.title = $(responseText).filter("title").text();
})
.fadeIn("fast");
});
History.Adapter.bind(window, "statechange", function() {
menuLink.removeClass("active");
$("a[href='" + History.getState().title + "']").addClass("active");
$('#sectionContainer').load(document.location.href, function(responseText) {
document.title = $(responseText).filter("title").text();
});
});
});
