How should I display header and footer on other than 'Home' page? - javascript

Should I do traditional copy paste the header and footer on every page, or is there any way that I can display it using JavaScript on every page!
Just expecting that if I would save some kilobytes on my .html files by rendering my header and footer on each page via JavaScript?

I agree that it will make life lot simpler, but in response to your query, utilise javascript as follows.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Home Page</h1>
<my-footer></my-footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>About Page</h1>
<my-footer></my-footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Contact Page</h1>
<my-footer></my-footer>
</body>
</html>
index.js
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header>
<nav>
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>About</a></li>
<li><a href=contact.html>Contact</a></li>
</ul>
</nav>
</header>`;
}
}
customElements.define("my-header", MyHeader);
class MyFooter extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<footer>
© 2022 My Company
</footer>`;
}
}
customElements.define("my-footer", MyFooter);
Hope this helps you.

I would seriously recommend using a frontend framework, such as Angular, Vue, Svelte, etc. You can create components for your headers and footers and then reused these across multiple places.

Related

How do I source files on a custom html tag?

I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>

how to create webpack multi page app with single core

hi recently I was working on SPA but for SEO purposes i decided to change my app to a multi-web page app (that they are SPA) and the core.js is identical between all pages and main.js file will drive my core.js and drow somthing in browser
i want my dist folder be like this picture
and my index.html (home page) be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mori</title>
</head>
<body>
<h1>this is from main page</h1>
tutorial
<script src="/core.js"></script>
<script src="/main.js"></script>
</body>
</html>
and all other view fllow same pattren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tutorial</title>
</head>
<body>
<h1>this is for tutorial page</h1>
main page
<script src="/core.js"></script>
<script src="/tutorial/main.js"></script>
</body>
</html>

Why am I getting null in the console in JavaScript? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 months ago.
I want the div to be output in the console but I am getting 'null' in the console.
This is my HTML ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="two_js.js"></script>
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
</body>
</html>
This is my JavaScript ->
let main = document.getElementById('main');
console.log(main);
What should I do?
Put your script tag inside and at the bottom of body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
<script src="two_js.js"></script>
</body>
</html>

Google Sign-In showing Error 400: invalid_request Permission denied to generate login hint for target domain in Javascript

The HTML code looks like this with tag and tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id" content="791276359692-0c2cpgs7dds6ffivpdjlrlhfgr82aao1.apps.googleusercontent.com">
<title>Journal App</title>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="js/index.js"></script>
</body>
</html>
I am using VS Code.
Under the Authorized Javascript Origins, URI's value should not be its IP address but "localhost:(port if any)".

threejs cannot be found

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

Categories