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

Add global header and footer in HTML using JQuery


















Software requirement









Prerequisite knowledge









Create 2 HTML pages












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