I am creating a nodeJs application in which I am serving html files on request. I have started working with Html recently. I want to create multiple html files but want to include the similar header.html in those all multiple html file. I have read different articles such as:
Make header and footer files to be included in multiple html pages. Also I have tried to use Html5 import statement but nothing is working. Is there any other way to do this with Html5 or with javascript or jquery. my code is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
<body>
<div id="frontpage"/>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
whereas my header.html is:
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/mycssfile.css"/>
<title>My application</title>
But it is not working! is there any way to make it working?
The error I am getting is :
GET http://localhost:3000/header.html 404 (Not Found)
Related
My project is on angularjs and php. I have been placed in a project that has been previously done by a group of 3 and the documentation was not clear. What I observe from that code is that whenever I declare any bootstrap class or id
without explicitly linking it in that html file
Eg:
<html>
<head>
<title>some title</title>
<!-- No CSS file linked here -->
</head>
<body>
<button class="btn btn-primary">Here</button>
</body>
For above document bootstrap classes "btn btn-primary" are applied. However, they have included that bootstrap file in a folder named "css" but DID NOT include/import that in that html file.
How does my html file know where to search for suitable css file?
Does it search all the available css files?
Is that a good practice or do I need to change that?
when I go to inspect -> sources
<html lang="en" ng-app="quiz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="controllers/displayController.js"></script>
<script src="controllers/quizController.js"></script>
<script src="controllers/welcomeController.js"></script>
<script src="controllers/csvController.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/adminController.js"></script>
<style>
body
{
background-color: bisque;
background-repeat: no-repeat;
background-size: cover;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
This is the default html for every page, now if I add anyother .js(In js file) or .css( In css file) it doesn't show up here or adds in my html. This came to notice when I added HTML2CANVAS file for one particular html file and it is saying "html2canvas is not defined" in console
Edit:
Thanks for the help JkAlombro, I found that this project uses angular router($routeprovider) So I traced default html file(index.html in this case) and added my js scripts and css links. To know whether your project uses $routeprovider, goto app.js file and check for app.config(function($routeProvider). Just so it helps anyone.
The reason why you can't see any css/js imports to your other HTML files is because that app using an angular router (most probably $routeProvider) and I can confirm that in your index html file.
See that <div ng-view> in your index? That's where all of your other html files are being displayed depending on what route is being pointed. Other proofs that you are using angular router is this script
<script src="script/angular-route.min.js"></script>
Why you don't have to import your css and js in the rest of your html file?
Because everything is being rendered to your index.html (or whatever your default html file is named) so you only need to include all of your scripts and css links there and it will be used all over your app. That's how a Single Page Application works (at least for AngularJS).
If you wanna trace where the router is being configured, most probably you can find it in your app.js or displayController.js.
Make a common header and footer file. Include all your css file in header and javaScript file in footer.
eg:
header.file
- Only push your content here -
footer.file
This way the css and js will be common for every other file.
My HTML is not connecting to my javascript. I have run it in debugger several times and no matter what I have tried my HTML has not connected to my js. I have done this small piece of coding a fair few times now and am stumped at why it is not working.
Here is where my HTML is supposed to connect to my javascript.
<head>
<meta charset="utf-8">
<title>One Down</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="termFourMajorProject.js"></script>
<link rel="stylesheet" type="text/css" href="term 4 major project.css">
<link rel="shortcut icon" href="two_decks.png"/>
</head>
Please, can you tell me why my HTML is not connect ing to my javascript? (ignore the jQuery document)
Make sure that your. js file is in the same directory where your html file is present. And also you should add html tag to your code
I need to inculde my JavaScript file in django. I know how to include CSS files. I'm doing it this way:
<link rel="stylesheet" href="{% static 'demo/style.css' %}"/>
How can I include my JavaScript file?
There are two ways to do this (inline scripts and external scripts):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// your js code here
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
You are probably interested in this one:
<script src="your-code-file.js"></script>
I know how to include files of CSS. […] How can I include my javascript file?
One obvious answer is “Manage it the same way as other static files. Then include it with a script element, the same way you'd do any JavaScript file”.
If you've tried that, or other things, please edit your question to say what you tried and what happened instead.
It may be confusing but what I mean is that I have this code in my main .html file:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/fpsgame.css" rel="StyleSheet">
<script src="js/fpsgame.js"></script>
<script src="js/lib/three.min.js"></script>
<script src="js/lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
and I want to create something in 3d (set the scene, set up the camera, create a cube) in the fpsgame.js and keep the script away from the .html file. However, what do I have to do if I want to use Three.js methods or methods from a library inside the fpsgame.js file?
In other words, how would I include the three.js library into the fpsgame.js file, which is not in the .html file?
I am displaying a webpage from a server in webview. However to handle some functionality I want to add 3-4 files from asset folder to the webpage.
How do you append these files to the webpage that also has some of its own javascript?
<head>
<script src='jquery.js'></script>
</head>
Paths that dont start with / are relative so try :
<script src='assets/jquery.js'></script>
this will work if your html files are in a directory / folder that contains an assets folder with the JavaScript library within that
if you want to specify an absolute path use
<script src='/assets/jquery.js'></script>
this will work if the assets folder is a sub folder of the document root directory
i added as you told but those javascript not working ,here you can see the html file- `
<!DOCTYPE HTML><html><head> <script
src='/assets/jquery.js'></script><script
src='/assets/rangy-core.js'></script><script
src='/assets/rangy-serializer.js'></script><script
src='/assets/android.selection.js'></script><title>Kendal Hunt -
Psychology - Brown CH, Foster JD, Gordon MS</title><meta
http-equiv="content-type" content="text/html; charset=utf-8" /><link
rel="stylesheet" type="text/css" href="style/style.css"
title="style" /><link rel="stylesheet" type="text/css"
href="style/brl.css" /><script
src="js/jquery-latest.js"></script></head>
`