Is there any jquery plugin to keep common header and footer in a HTML page? [closed]

Answer 1

jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.

jQuery replacing common parts of site

You can do something like this:

jQuery(function(){
    jQuery('.header').html('SOME COMMON HEADER');
    jQuery('.footer').html('SOME COMMON FOOTER');
});

See it in action here: http://jsfiddle.net/6sCfm/

jQuery loading external files into containers

Or, if you insist on loading external files, you can do this (using .load()):

jQuery(function(){
    jQuery('.header').load('header.html');
    jQuery('.footer').load('footer.html');
});

but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need (no , tags, etc. - it will make HTML incorrect).

Loading parts of pages into containers

If you have whole pages (with ,

etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. header and footer) and supply them in the path, after space, as selector:

jQuery(function(){
    jQuery('.header').load('header.html #header');
    jQuery('.footer').load('footer.html #footer');
});

This should be flexible enough :)