Is there any jquery plugin to keep common header and footer in a HTML page?
html, javascript, jquery, jquery-plugins
Solution
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 `<head>`, `<body>` tags, etc. - it will make HTML incorrect).
Loading parts of pages into containers
If you have whole pages (with `<head>`, `<header>` 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 :)
Problem
Is there any jquery pluginto use to keep common header and footer in a HTML page? Like if i can add header.html and footer.html into index.html. I know I can with php but if possible I want to do without installing any server on my local PC. later after all work done i will use php includes header.html ``` <title>Template</title> <meta name="description" content=""> <link rel="stylesheet" href="css/styles.css?v=1.0"> <script src="js/modernizr-2.0.6.min.js"></script> ``` index.html ``` {include header.html} <body class="home"> {include footer.html} ``` Footer.html ``` <footer class="f1"> <p>copyright © year</p> </footer><!-- .f1 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/general.js"></script> </body> </html> ```