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?
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.
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)
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.
I was able to create an Android hello world app that loads html file from assets folder using WebView.loadDataWithBaseURL method:
webView.loadDataWithBaseURL("file:///android_asset/appcode/", html, "text/html", "UTF-8", null);
My html looks somewhat like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="/js/lib/jquery-1.11.0.js"></script> <!-- This script is not being loaded -->
<script src="helloWorld.js"></script> <!-- This script is being loaded -->
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
The problem is the following: jquery-1.11.0.js is not being loaded while helloWorld.js file loads successfully. I verified that the file exists under relative path.
If I move jquery-1.11.0.js to the html file location (to the same place where helloWorld.js is located), it fixes the problem. But I want to use relative paths for loading scripts. Thanks in advance.
UPDATE:
Moving all js files under /assets/appcode/ is not an option,
because I am planning to reuse html files that are relying on these
relative paths
Using CDN links will not work, because I'm
planning to load my own scripts that are not available on the web
If i use "file:///android_asset/appcode/js/lib/jquery-1.11.0.js" instead of "/js/lib/jquery-1.11.0.js" it also works. But this is absolute path, when I want to use relative.
I'd suggest you to use CDN instead:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="helloWorld.js"></script>
Absolute paths sometimes don't work in the WebView such as JavaScript file.
I suggest use relative path with dot(.) followed with path
<script src="./js/lib/jquery-1.11.0.js"></script>
^
I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers