Kevin Kevin - 4 months ago 15
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

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

$("#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").delay(1000).empty();
});

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

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
    $("#page").fadeIn();
});

PS: I have not tested this code.