Dipanshu
Reputation: 29
How to create Dynamic Header and footer for web pages in JS?
I am developing a website and there are many pages in the website, so I want the header and footer files dynamically calling to all the web pages.
I have written a script but it is not working. Please help.
Here is the script:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
**<script src="jquery-3.3.1.min.js"></script>**
</head>
**<script>
$(function(){
$("#header").load("header/footer/header.html");
$("#header").load("header/footer/footer.html");
});**
</script>
<body>
**<div id="header"></div>**
<center><h1 style="color: black; padding: 10%;">Starter Template</h1></center>
**<div id="footer"></div>**
</body>
</html>I have created a folder named HEADERFOOTER and in this folder, I have created 2 HTML files named header.html and footer.html
HEADER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-expand-lg fixed-top header navbar-light" style="background-color: #fff;">
<a class="navbar-brand" href="index.html"><img src="img/Capture.JPG" alt="BOOKSthread" title="Books Thread" class="img-responsive" style="height: 70px; width: 210px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active nav-heading">
<a class="nav-link nav-head-color" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">How It Works</a>
</li>
<li class="nav-item dropdown nav-heading">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: black;">
Category<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
<li><a class="" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">New Arrivals</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">Subscription Plan</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="search" type="search" placeholder="Search" aria-label="Search" style="width:300px;">
<button class="btn btn-outline-success my-2 my-xl-0" type="submit">Search</button>
</form>
<span> </span>
<button type="button" class="btn btn-primary btn-sm">Login</button>
<span> </span>
<button type="button" class="btn btn-warning btn-sm">Signup</button>
</div>
</nav>
</body>
</html>FOOTER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<!-- Google +
<a href="#" class="google"><i class="fa fa-google"></i></a>
<!--youtube
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
<!--Instagram
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
</p>
<p class="social-networks">
<a href="#" class="google"><i class="fa fa-google"></i></a>
</p>
<p class="social-networks">
<!--youtube -->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
</p>
<p class="social-networks">
<!--Instagram-->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:[email protected]" style="text-decoration: none;">[email protected]</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> [email protected]</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!---->
</body>
</html>Please help to create the dynamic header and footer in across all the pages.
Thanks!!
Upvotes: 0
Views: 7819
Answers (2)
user3785966
Reputation: 2970
You can follow the below steps:
Step 1: Create footer.js
Create a file footer.js with html contents like below:
document.writeln('<p> Copyright 2020, G Inc. All Rights Reserved </p>')
If in-case you have single quotes with-in your document.writeln, replace it backslash. Eg.: \'text \'
Step 2: Include this in your HTML file.
<script language="javascript" type="text/javascript" src="footer.js"></script>
You can do the same for the header.
Upvotes: 1
Marco Messina
Reputation: 104
Why do not you use ajax to load the content? Insert this script inside the head tags and the file should load.
<script>
$(function(){
$.ajax({
type: "GET",
url: "header/footer/header.html",
dataType: "html",
success: function(answer) {
$("body").append(answer);
},
error: function(){
alert("failed call!!!");
}
});
return false;
});
</script> I also saw that the files you need to include have html tags that have already been placed on the main page. You do not need to re-enter those tags but only the affected content, eg for the footer:
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<!-- Google +
<a href="#" class="google"><i class="fa fa-google"></i></a>
<!--youtube
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
<!--Instagram
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
</p>
<p class="social-networks">
<a href="#" class="google"><i class="fa fa-google"></i></a>
</p>
<p class="social-networks">
<!--youtube -->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
</p>
<p class="social-networks">
<!--Instagram-->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:[email protected]" style="text-decoration: none;">[email protected]</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> [email protected]</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->The same thing must be done with the header but first insert the latter because the function append() insert the content at the end of the selected element and how it is right that the footer is put underneath.
Upvotes: 1
Related Questions
- How to create Header/Footer
- Insert header and footer on all webpages using javascript
- Include Header and Footer as Separate Files Using HTML
- How to add common header footer using jQuery
- using a js script to generate <head> and <footer>
- How to make a website-wide footer using <div>
- One header for multiple pages in HTML
- header and footer on multiple pages using js
- html creating dynamic page with footer and header and content
- How to change header and footer dynamically?