I switched from Jade to basic HTML and ran into the following problem:
How can I have one navigation menu for my whole website (in one file)?
In Jade I did the following:
I had my menu in default.jade:
body
.header-site
h1.page-title Christopher Kadé
ul.nav-site
li: a(href='/') About me
li: a(href='/projects') Projects
li: a(href='/contact') Contact
.main-content
block content
And would include default.jade in every other .jade file, and write its content in a block content. This way, I have my header and menu available throughout my website.
But I can't seem to figure out the equivalent method in good old plain HTML.
In order to have the same navigation menu throughout your website, you could either use php or javascript. Using php-
<?php
include_once 'navigation.php';
?>
Using javascript
<div id="navigation">
</div>
<script>
$("#navigation").load("navigation.html");
</script>
You need a server side include (with a server side language) - HTML doesn't support this natively. Or if using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#nycontent").load("header.html");
});
</script>
</head>
<body>
<div id="mycontent"></div>
</body>
</html>
header.html
<h1>test</h1>
alternatively, with plain old JS:
<html>
<body>
<script src="myscript.js" />
</body>
</html>
document.write('\
\
<h1>This is my include file</h1>\
\
');
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
I'm making a header using HTML and Bootstrap and I want the header to appear on all pages of my site. Is there a way to do something similar to a CSS style sheet but instead of CSS, reusing HTML?
The simplest way I believe is to use jQuery.
See jQuery docs here
one.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#header").load("two.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
two.html:
<p> Put your header in here </p>
If you don't want to store jquery, you can use a CDN
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>$(document).ready(function () { $("header").load("assets/header.html"); });</script>
</head>
<body>
<header></header>
</body>
</html>
Javascript as on: {% extends "xxx.html" %}
You can use an <iframe> to change the content that is displayed, and only code the surrounding header/footer/etc. only once. There seems to be some uneasy feelings about using them floating around, so I would do some research on that before I committed to it.
HTML include is a recent feature you could try as well. Otherwise, it's gonna be good ol' fashioned ctrl-c ctrl-v.
I'm currently trying to develop a site using node.js. I'm having some trouble due to my unfamiliarity with html and node.js. Is there any mechanism in either node.js or html where I don't have to recreate a header & footer for every single web page (eg: copy paste the html code each time)?
Not sure this will answer you question but it's one way to add header and footer in HTML pages without repeating the code.
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
and in your main index.html file will be
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
So the complete index.html will be look like this
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
</body>
</html>
Since you said you are unfamiliar with html and nodejs i assume u are a beginner.
To achieve what you are looking for can be done in multiple ways and one of the ways is given by shehary which renders the page on client side(user's browser) and uses jquery to manipulate DOM to insert the header and footer. other ways include inserting the header and footer on server side using templates. some of the popular templates used in nodejs are ejs jade swig etc. you can also do it client side using jQuery , angularJS ,backboneJS etc. each of them have a their own positive and negative points.
I'm a complete beginner in web design. I couldn't find an answer after some search.
I purchased a template to create my personal website, and now I'm editing the navigation bar data. Yet, it seems that I have to copy and paste this in every single html file that has the navigation bar, which doesn't seem right.
Is there a way to have all this data in a single file, and then edit it once so that it's automatically included in all pages?
Thank you.
aa
Just include nav.html where you want it to be(inside your code):
include('nav.html');
You main code must be in index.html.Put the code for nav in nav.html and then include nav.html in index.html where you want your nav to be.
You save nav in single file, ex nav.htm , then included using iframe or java scirpt.
Iframe: <iframe src="nav.htm"></iframe>
Javasciprt, you can using jquery
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function{
$("#nav").load("nav.htm");
});
</script>
</head>
<body>
<div id="nav"></div>
</body>
</html>