Home/ Questions/Q 6967869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:22:42+00:00

Is there any jquery pluginto use to keep common header and footer in a

  • 0

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 &copy; 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 🙂

    • 0