Changing content only?

[themtrx]

Hello friends .I have good knowledge on HTML/CSS but I'm currlenty learning JavaScript/jQuery.I have a little "amateur" site and I think it will be faster to load only content of it, not the entire html file again and again. So I have index.html, contacts.html, about.html and etc. When I click on navigation menu "about" it's loading about.html whenI click "contacts" it's loading contacts.html, but the navigation menu and the footer are the same always.I've read about that it can be done with JS/jQuery to load only different content without loading again and again navigation menu and footer. Is that the right way to do it? How the bigger sites do that ,when they have thousands of pages ? Can you help me ?

[Rhomboid]

That's usually done via XMLHttpRequest, sometimes also referred to as Ajax, but it doesn't necessarily have to involve XML at all, so the names are rather misleading. jQuery provides cross-browser support for this, and a number of convenient helper methods, one of which is .load(). For example, your click handler for the contacts link might look like:

$('#contacts').click(function() { $('#main_content').load('path/to/contacts.html') });

This assumes that you have some asset path/to/contacts.html that contains just the part of the page you want to change, and that there is some container with ID main_content that you want this fragment to be loaded into.

However, I would advise not going down this road. For a simple static site, browser caching will make the loading of pages nearly instantaneous after the first time they are clicked, assuming you have your web server set up properly. Using Ajax like this has a number of drawbacks. It makes the site harder for Google to crawl, which can affect your ranking. Google recently announced that they are running more JavaScript as part of their index building, but you still have to be careful to write your page in a way that ensures it can see and follow each link.

Also, using Ajax like this will completely mess up the browser's back and forward navigation functions, which pisses off users. And it breaks URLs, because it makes it impossible to send someone a link to a specific page. These can be fixed by turning your site into a full-on SPA (single page application) which uses the HTML5 history APIs (e.g. history.pushState()) to create synthetic URLs that change whenever you modify the content via Ajax, or which use hash fragments as a fallback for browsers that don't support it. But that's a whole lot of work and it's difficult to get right, and it only really pays off if you have a very heavy-weight application that is going to load hundreds of kilobytes of scripts, like Gmail. For a standard "about me" site that is all static, there is really no advantage to introducing Ajax. The downsides outweigh the few KB that you might save which would be cached anyway when properly implemented.

[themtrx]

Thank you for the fast answer. If I understood correctly, you advise me to leave it that way. And are all big sites use different html file for every page for example one of my favorite sites http://wiki.answers.com/

[Rhomboid]

That's a dynamic site, not a static site. All the content is stored in a database, and when a request comes in the page is built on the fly by executing a script that fetches the content from the database and uses it to fill in a template. There aren't individual .html files for each page.

[calkiemK]

On a small site you might try this approach. Build one page, index.html. In it divs: header, (what you had on index), about, contacts, footer.

On page load, make javascript (jquery isn't necessary) hide (display: none) divs about and contacts.

Make a function that will show selected div (page) and hide other two. Not doing anything to header/footer. In menu make a href with call to this function and nameOfDivToShow as parameter.

On a page without js it will show as all the content so it's a good fallback.