Answer 1 - Get the name while working forward and backward
As I understand it, you want to change the title of the html document from the link, is loaded into the div. When you upload a file to a div via jQuery .load , you simply insert the full response text after the ajax request. Thus, with all things that should not be in a div, like a title tag or meta . 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 the div, so the name of the document does not change.
So how can I fix this?
Good question, because the title element inside the div element is not valid, most browsers will remove it, so you cannot just use this:
document.title = $("#sectionContainer title").text();
since the title element may not exist.
So, we need a direct answer from the jQuery .load function. I can get it by adding a callback argument to the function:
$("#sectionContainer") .hide() .load(newLoadedHtml, function(responseText) { document.title = $(responseText).filter("title").text(); }) .fadeIn("fast");
What you may not understand, therefore I use the .filter function, not .find . This is because jQuery is a parsing of the html , head and body tags from html, but does not remove the children.
Answer 2 - Optimizing the loading time of the main page
The document is loaded from top to bottom.
So, first of all you need to load CSS, JavaScript, etc., and then the main document. Since jQuery always waits for a document to execute, it would be a very bad idea to put all your script elements right to the end of the body so that your HTML can be loaded earlier.
BtW I had this problem for the first time after everything was cached and the document loaded very quickly.
Answer 3 - Correct the active class when moving forward and backward
I would say that the loop goes through the href attributes of a elements and compares them with the data from History.getState() . It should be easy.
You made some mistakes in your code - your fixed code:
You have added the #content hash to all the urls .. this doesn't make sense and it will be deleted again using jQuery: https://github.com/jquery/jquery/blob/master/src/ajax.js#L617 ( comes from the line: 158, 190, 337, 617 - the blur 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(); }); }); });