zepp
/
emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set script tag to defer in pets.php to resolve footer being null

This commit is contained in:
emma 2024-12-18 23:32:38 -05:00
parent 719f2c74fe
commit 4f9868e296
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
life/pets.php
View File

@ -86,7 +86,7 @@
</figure> </figure>
</section> </section>
</main> </main>
<script src="../script/image-enlarger.js"></script> <script src="../script/image-enlarger.js" defer></script>
<?php include "../includes/footer.php" ?> <?php include "../includes/footer.php" ?>
</body> </body>
</html> </html>

18
script/image-enlarger.js
View File

@ -3,35 +3,39 @@ const body = document.querySelector("body");
const main = document.querySelector("main"); const main = document.querySelector("main");
const nav = document.querySelector("nav"); const nav = document.querySelector("nav");
const header = document.querySelector("header"); const header = document.querySelector("header");
// script tag needs defer attribute as footer is included by php
// after script tag. defer makes sure the script is loaded after
// everything else on the page has loaded
const footer = document.querySelector("footer");
enlargeImg.forEach((img) => { enlargeImg.forEach((img) => {
img.style.cursor = "pointer"; img.style.cursor = "pointer";
img.addEventListener("click", () => { img.addEventListener("click", () => {
// make background for image
let div = document.createElement("div"); let div = document.createElement("div");
div.style.height = "100vh"; div.style.height = "100vh";
div.style.width = "auto"; div.style.width = "auto";
div.style.backgroundColor = "#000000"; div.style.backgroundColor = "#000000";
// hide current page contents
main.style.display = "none"; main.style.display = "none";
nav.style.display = "none"; nav.style.display = "none";
footer.style.display = "none";
// i do not know why i have to do footer this way
// if i declare it at the top as a const it is null
// will figure out later
document.querySelector("footer").style.display = "none";
header.style.display = "none"; header.style.display = "none";
// remove display: grid from body and append div with enlarged image
body.style.display = "block"; body.style.display = "block";
body.append(div); body.append(div);
div.addEventListener("click", () => { div.addEventListener("click", () => {
// remove div and restore elements contained in body
// to their original display properties
div.remove(); div.remove();
body.style.display = "grid"; body.style.display = "grid";
main.style.display = "block"; main.style.display = "block";
nav.style.display = "block"; nav.style.display = "block";
header.style.display = "flex"; header.style.display = "flex";
document.querySelector("footer").style.display = "flex"; footer.style.display = "flex";
}); });
}); });
}); });