Articles → JQUERY → Add Global Header And Footer In HTML Using Jquery

Add Global Header And Footer In HTML Using Jquery

In this article, we will add global header and footer in HTML using JQuery.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2005 (or above) is installed on your machine.
Latest jQuery file i.e. jquery-latest.js (from the path http://code.jquery.com/jquery-latest.js) is downloaded on your system.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

Basics about HTML
Basics about JQuery.

Create 2 HTML Pages

Add 2 html files

Page1.htm
Page2.htm

See the screen shot and HTML code of both file below

Page 1 -

Click to Enlarge

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Page 1</title>
</head>

<body>
	<div id="header"></div>
	<div id="body">
		<table style="width: 100%;">
			<tr>
				<td>Login Id</td>
				<td>
					<input type="text" />
				</td>
			</tr>
			<tr>
				<td>Password</td>
				<td>
					<input type="password" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="Login" />
				</td>
			</tr>
		</table>
	</div>
	<div id="footer"></div>
</body>

</html>

Page 2 –

Click to Enlarge

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Page 2</title>
</head>

<body>
	<div id="header"></div>
	<div id="body">
		<table style="width: 100%;">
			<tr>
				<td>Forgot password</td>
				<td>
					<input type="text" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="Send Password" />
				</td>
			</tr>
		</table>
	</div>
	<div id="footer"></div>
</body>

</html>

Add A Method Jquery Method To Create Footer

Add a script file (script.js) and add following code

function AddFooter() {
 var footer = "";

 footer = "<table style=\"height: 20px; width: 1203px\"><tr><td>© All rights reserved   <a href=\"ContactUs.html\">Contact Us</a></td></tr></table>";

 return footer;
}

Here, we have declared a variable footer and set its value with some HTML code. This code is the footer’s HTML which we want to show in both HTML files. Finally, we are returning the variable footer.

Call Method In Both The HTML Files

The description which I am giving here holds for both the HTML pages i.e. page1.htm and page2.htm.

First, add 2 script tags one for JQuery and other for the script file which we have added in previous section. See the code section below

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="Script.js"></script>

Then in jQuery’s ready function, I am calling the function AddFooter() and assign the returned HTML to the element with id = footer. Footer is the div element which is present in both the html files.

<script type = "text/javascript">
 $(document).ready(
  function() {
   $("#footer").html(AddFooter());
  }
 ); 
 </script>

In the same way we can add header.

Output

Page1.htm

Click to Enlarge

Page2.htm

Picture showing page2.htm after adding global header and footer

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Monday, April 15, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**