Kevin Kevin - 2 months ago 8
HTML Question

How to load inner html of div from another page?

I'm currently working on a website where the navigation bar links would seamlessly lead to another page with fading transitions without loading.

When the links are clicked, the

block, which has the main page content and the footer, would fade out, empty itself, and fade back in with the content of the
of the clicked link. However, my current code, seen below, placing the html of the entire page (including the
contents) on
instead of just the inner HTML of

$("#header .menu a, #header .logo").click(function() {
var href = $(this).attr("href");
var title = $(this).attr("title");

history.pushState(null, title, href);

$("#page").fadeOut("slow", function() {

$("#page").load(href + "#page", function() {

return false;

Answer Source

From the docs

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

So try adding a white-space like so

$("#page").load(href + " #page", function() { //White space before #page

PS: I have not tested this code.