From framesets to hashchange

The technique explained on this page is used HERE

From frameset to hashchange

In the old days, many designers used frames within framesets to present documents in multiple views. This allowed them to modify the menu for the whole site by just updating the page in the navigation frame. And visitors could go from one (content) page to another without causing a page (re)load in the navigation frame (or another frame).

Framesets were abandoned when people started to realize that their benefits didn't outweight their numerous problems and that other ways of updating small areas of the page (Ajax, server side includes) were available. These new techniques are superior to framesets, except for ...

Except for one thing, hardly known or mentioned: the new techniques cause a reload of the navigation menu each time visitors go to the pages where it is included. For instance, when we use <?php include("menu.php"); ?> on our pages, visitors load both their contents and the menu at page entrance / at page transition. This is not desirable. Something static (like the navigation menu) should not reload. Note that this is not just a theoretical problem without practical impact. Every unnecessary page reload may cause unnecessary 'flicker' on the screen.

Fortunately, the new cross-browser HTML5 window.onhashchange event allows us to 'mimic' the frameset-method without its disadvantages. The idea is the following:

In index.html we put our menu (together with all the js and css needed to make it standalone). We also put there everything else we want to be visible on all pages: banner, images etc.
Also in index.html, we put a div for loading our content pages with the help of the window.onhashchange event and the jquery load method.
When we click on an item of the menu in index.html, the div's content is replaced with other content and the URL in the address bar changes, but we don't leave index.html. So there's no reload of the navigation menu.
On the other pages of our site we put a script ensuring that they don't show as 'orphans' (= without the menu etc. in index.html) when accessed directly.

This is an exact mimic of what happens in framesets, where the navigation frame will not reload when the content frame loads a new page. Here's an implemetation of the idea:

index.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>From framesets to hashchange</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="#home.html">Home</a>
<a href="#page1.html">Page 1</a>
<a href="#page2.html">Page 2</a>


<div id="content_pages" style="padding:100px"></div>
<script>
function hash_change()
{
$('#content_pages').load(location.hash.substring(1,location.hash.length))
$('*').scrollTop(0)
}
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash=='')window.location.replace('#home.html')
</script>
</body>
</html>

Other pages, called home.html, page1.html, page2.html here:

A visitor who stumbles on a page of our site (other than index.html) will not see the menu, because the menu is on index.html. To solve this problem, we just put <script src="no_orphans.js"></script> in the head of the external pages (but we don't put it in index.html; click on the link to see what must be put inside the js-file).
Note: the links in the other pages are identical (syntactically) to the ones used in index.html.