Menu
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>
685
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.
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/
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).
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 :)
150
jQuery UI is working on templating and also has a list of existing template engines (on that page).
If you want something super simple, just write something small to ajax in the content you want. Then include that script on all pages that need it.
$.get('/header.html', function(data) { $('#headerPlaceholder').html(data); });
$.get('/footer.html', function(data) { $('#footerPlaceholder').html(data); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
