Posted by Pete McBreen 05 Jan 2011 at 14:49
The syntax for this is relatively simple
This solves the problem of wanting to make sure that the footer is identical on all pages without having the problem of making sure that you edit all 20+ pages in a static site. Sure it would be a whole lot easier to just use a dynamic site and include whatever code was needed in the page, but some sites are still made out of static (X)HTML so this is a neat fix.
$('#footer').load('index.html #footer ul.menu'); line is the key one, it loads the index.html page and then extracts the contents using a CSS selector #footer ul.menu and replaces the existing footer div on the current page with the specified content from the index page.
Yes, the obvious complaint is that it slows down the page load time, but for most static sites this is less of an issue than the maintenance hassle of ensuring that every page is updated whenever a change occurs. It also has the side effect of cutting down the total size of the pages for sites that have lots of boilerplate code in the footer or sidebars.
For completeness I should also show the footer from the index page
<div id="footer"> <ul class="menu"> <li class="menulinks"> <div><a title="Home" href="index.html">Home</a></div> </li> ... lots of other links missed off here </ul> </div>