I'm creating a website using GitHub Pages and I want to put the header and footer into separate documents to then link to them on each page I make. GitHub pages only supports static websites, so I can't use PHP or anything like that.
I'm trying to use the advice I found on:
Make header and footer files to be included in multiple html pages
https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez
https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing
which uses jQuery but it's just not working for me. Can someone tell me where I'm going wrong?
My file hierarchy:
- index.html
- html
- header.html
- footer.html
- otherfiles.html
- css
- header.css
- footer.css
- otherfiles.css
this is in the index.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("html/header.html");
$("#footer").load("html/footer.html");
});
</script>
</head>
<body>
<!-- Header-->
<div id="header"></div>
<!--main section-->
<!-- Footer -->
<div id="footer"></div>
And I put this in footer.html and header.html body:
<body>
click here for google
This is from what I can tell, what I'm meant to do, but it's not working at all. Just no header or footer appears on my website.
possibly look into using an iframe object to reference the page, theres an example on the last link you posted (one of the comments)
OR try removing header/footer files from the html folder and put them in the same directory as index.html, to eliminate the possibility that its the file reference that is the issue.
OR look into using the handlebars.js library. this library can be used to implement an MVC layout (basically files are referenced by a home controller to display content). And it will work with GithubPages, I've done it before.
hopefully this helps a little, at the very least pointing you in the right direction.
Related
Hi I am new to electron so i don't know how to do this simple thing... also tried searching before asking but was not able to find proper solution.
// HEADER
<!DOCTYPE html>
<html>
<head>
// some css files
</head>
<body>
// END HEADER
// INDEX.HTML
<div class="wrapper"></div>
// END INDEX.HTML
// FOOTER
// some scripts using require and script taglike
require('renderer.js');
</body>
</html>
// END FOOTER
These are three parts of my file header, main content, footer ... I want to keep header and footer in different files so that i can include them in other files too so that all the pages can get same header and footer.
In php I used to do include("header.php"); Something Like this I want to do in Electron
I Want to include header.html and footer.html in index.html file
Please try to give the easiest solution
So I am trying to make a template using HTML and jQuery AJAX. The problem that I am running to is HTML is automatically closing tags prior to receiving my closing tags so it messes up my format i need to know more info about this or a better way to do this
JavaScript
$.post( "https://url.com/header.php", function(data){
$( "#header" ).after(data);
});
$.post( "https://url.com/footer.php", function(data){
$( "#footer" ).before(data);
});
This is the opening tag in the #header file that I'm pulling from server
<div class='container-fixed'>
This is closing tag my #footer file that im pulling from the server
</div>
Than I have my home.html file which is my template page with my #header,#footer
<header id='header'></header>
<div>HELLO WORLD</div>
<footer id='header'></footer>
This is how I want my final code to look after header and footer has loaded
<div class='container-fixed'>
<div>HELLO WORLD</div>
</div>
But this is what is actually happening
<div class='container-fixed'>
</div>
<div>HELLO WORLD</div>
The browser is not wrapping my code in the container file, it just closes my container div on its own than it just deletes my closing tag in footer file. My code is way more complex than what I'm using in this example, but I'm just trying to keep it simple; I know that I can add the container div to my home.html but that's not what I'm trying to do. Any workaround? Thanks
My question is how can I send and unclosed tag in 1 file and close it in the other without browser doing it for me.
It's a hassle (and not a good practice) to spread opening and closing tags across multiple files. Even if you want to have separate files for each header, content, and footer, make a base template file which includes these three (or more if needed) files and each of the file has its own neat and complete code with each file opening and closing its own tags within itself. That makes life easier for development, maintenance, and scaling.
Below is a sample layout for a base template file:
<html>
<head>
<!-- include HEAD file here (meta tags, styles, js/css files etc.) -->
</head>
<body>
<div id="container">
<header>
<!-- include/display HEADER file here -->
</header>
<nav>
<!-- include/display NAV/MENU file here -->
</nav>
<div id="content">
<!-- include/display CONTENT here -->
</div>
<footer>
<!-- include FOOTER file here -->
</footer>
</div>
</body>
</html>
You can add or remove individual modules (files) as per your requirements.
In my opinion, this approach will be most suited to you since you are trying to build the template through ajax, so you can easily keep all files separate and then include them as and when you need them. You can also have some files included by default (on page load) and include others dynamically through ajax. Hope you get the idea.
I am working on a project that requires two angularjs files, textAngular-sanitize and angular-sanitize. When both of these files are loaded in the header or footer, the part of the document that requires the file that is loaded first will work, however the element that requires the file that is loaded after the first ceases to work. I.e when angular-sanitize is loaded first, then the textAngular dependent element stops working, whereas if the textAangular file is loaded first, then the angular-sanitize element stops working. This is presumably because both files are loaded and run over the entire document. Is there a way to confine the 'scope' of one of the files to only one element on the page so that both scripts can be run without interfering with one another?
Or perhaps, is there an alternative method of loading external scripts other than the <script> tag?
Here is an example of what is going on:
<head ng-app="myApp">
<script src="scripts/textAngular.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainController" ng-init="initialize()">
<div id="ngSanitizeElement">
<!-- This element won't work -->
</div>
<div id="textAngularSanitizeElement">
<!-- This element will work -->
</div>
</body>
Not sure to understand your problem, but if you're looking for something to load external files from your controllers or your router, try ocLazyLoad : https://oclazyload.readme.io/docs
Which backend do you use? PHP? I would then put in the script tag the value of the right file depending?
Or can't you use 2 different ng-controllers?
<div ng-controller="textAngular ">
<div ng-controlelr="angular-sanitize">
I'm new in javascript. I'm making a simple website with a common header in the file header.html and I included it in each page of the site with ng-include.
My problem is that the content of the page loads first and then the header, that pushes the rest of the page down. Is there a way to make the header to load first?
Thanks
EDIT: I also include a footer that has the same problem.
you can load header form external view
<div ng-include src="'views/header.html'"></div>
and then the rest of your app, notice you can put your angular refrence in head section
Did you try adding header via PHP include?
<?php include 'header.html'; ?>
I did find that most efficient way for my website and did the same with footer.
I have a website that is mostly done in HTML and CSS with some JS.
Ive now set up a page where header is perfect to me - it is FIXED contains Divs with a Logo, a search bar and phone number. Underneath this div is a Navbar that is controlled by master Javacript file as a template and also the Navbar fades upon scroll with JS.
My question is how do I set it up so that the entire header with all that styling can be replicated on 80 pages and I just have to change it once?
I've tried this below - where an external page header1.html has the header code (of which has full html head, body, etc) but when I load it all, the page calls up the header1.html quickly and then disappears.
<script src="//code.jquery.com/jquery-1.10.2.js"></script> in head
<div id="header"></div>
<script>
$("#header").load("header1.html");
</script>
end body
header1.html should NOT contain a full html document. Rather, it should just be the snippet of html code that you need for the header stuff.
You can use php. Place the content from the header in header.html, place te next code in every page where you want show the header.
<?php include 'header.html'; ?>
Note: change your files from .html to .php