Articles → JQUERY → Add global header and footer in HTML using JQuery

Add global header and footer in HTML using JQuery



  1. Software requirement
  2. Prerequisite knowledge
  3. Create 2 HTML pages
  4. Add a method jQuery method to create footer
  5. Call method in both the HTML files
  6. Output

Software requirement


  1. Visual studio 2005 (or above) is installed on your machine.
  2. 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


  1. Basics about HTML
  2. Basics about JQuery.

Create 2 HTML pages


  1. Page1.htm
  2. Page2.htm




Picture showing page1.htm

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>




Picture showing page2.htm

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




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;
}





Call method in both the HTML files






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




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





Output




Picture showing page1.htm after adding global header and footer

Click to Enlarge



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/FeedbackCharacters remaining 250