So I have created this script to import a night or day version of an animation for my static website.
I am hosting using Github Pages but I can’t find out for the life of me why it seems to have suddenly stopped importing the code to include the GIFs.
The script I’m having issues with is the ‘getimg’ one, the other one is for the night and day stylesheet.
I haven’t made any more commits to the github version since last night, when it was working flawlessly
the live website is: https://scrapbook.arronware.com/index.html
I’d really appreciate the help, I’m at a complete wits end with this
All I’ve really done on my local version is make some CSS adjustments for another page (each page has it’s own stylesheet alongside one with the core content) and added another GIF to another page
Thanks 🙂
(this page also has HTML includes from W3 school however I’ve removed the script from the top of the page to make troubleshooting easier for you.
THE ISSUE PERSISTS WITH THE STYLESHEET DAY/NIGHT SCRIPT
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
<html>
<head>
<script>
function getimg() {
var currentTime = new Date().getHours();
if (0 <= currentTime&¤tTime < 8) {
document.write("<img src='assets/scottownnight.gif' id='headergif' >");
}
if (8 <= currentTime&¤tTime < 17) {
document.write("<img src='assets/scottownday.gif' id='headergif' >");
}
if (17 <= currentTime&¤tTime < 0) {
document.write("<img src='assets/scottownnight.gif' id='headergif' >");
}
}
</script>
<script>
function getstyle() {
var currentTime = new Date().getHours();
if (0 <= currentTime&¤tTime < 8) {
document.write("<link href='nightstyle.css' rel='stylesheet'>");
}
if (8 <= currentTime&¤tTime < 17) {
document.write("<link href='style.css' rel='stylesheet'>");
}
if (17 <= currentTime&¤tTime < 0) {
document.write("<link href='nightstyle.css' rel='stylesheet'>");
}
}
</script>
<link href='style.css' rel='stylesheet'>
<link href='core.css' rel='stylesheet'>
<script>getstyle();</script>
<title>arron ware's scrapbook</title>
<link rel="icon" href="jessop.ico">
<meta name="description" content="projects and recipes">
<meta name="keywords" content="arron, ware, photography, sound design, manchester, lincolnshire, cleethorpes, video, art">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta charset="UTF-8">
<meta name="language" content="English">
<meta name="author" content="Arron Ware">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="logolinks">
<h3>
<a href=index.html style="text-decoration: inherit; color: inherit; font-family: inherit; font-size: inherit;">arron</a> ware's scrapbook
</h3>
<div w3-include-html="include/links.html"></div>
</div>
<script>getimg();</script>
<div class="content">
Hi!
This is my scrapbook website.
I keep all my my little projects and bits that I would like to have online somewhere here. <br><br>
The website has no sole objective other than to be one large mashup of odd and ends, I hope you enjoy exploring!
</div>
</body>
</html>
<script>
includeHTML();
</script>