I have many .js files loaded in my index.html in the following format:
<script src="file.js"></script>
Is there an option to create an HTML file where I will source all my JS and CSS files and then include this HTML file in my index.html?
In order to load a HTML file, add a link tag with an import in the rel attribute and an href that contains a path to the HTML file. For example, if you want to load a HTML file called myImports.html into index.html:
index.html
<link rel="import" href="myImports.html" >
You can load any resource including scripts, stylesheets, and web fonts, into the imported HTML just like you do to regular HTML files:
myImports.html
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
Whereas doctype, html, head, body aren't required. HTML Imports will immediately load the imported document, resolve subresources and execute JavaScript, if any.
Instead of making on html file that include all js and css files. the more practical Solution is to merge all your javascript/CSS files into one file. then include that file into your html. Their are tools available that can help you to achieve this automatically e.g Gulp, YEOMAN etc.
Related
I just set up a very basic Spring Boot Web Application with Thymeleaf, but I can't access my external JS file from the corresponding HTML file of my template and can't figure out why.
My resource folder structure is as follows:
static/
index.html
css/
graph.css
js/
createGraph.js
templates/
visualizeGraph.html
Within my visualizeGraph.html I try to call the createGraph.js using following snippet within the <body> element:
<script th:src="#{/js/createGraph.js}" type="text/javascript" >
</script>
In the <head> element of visualizeGraph.html, I added my stylesheet using following snippet:
<link rel="stylesheet" type="text/css" media="all"
href="/css/graph.css" th:href="#{/css/graph.css}" />
My Spring Boot Web Container runs on Port :8082, so I access my webapplication from localhost:8082 and access the visualizeGraph template from localhost:8082/visualizeGraph
When I check the Developer Console (F12), it throws a 404 for the createGraph.js file, but not for the graph.css file -> it can find the css successfully.
I can even access the css through localhost:8082/css/graph.css but CAN'T access the js-file using localhost:8082/js/createGraph.js (throws a 404 - as expected)
I can't figure, what's the cause for this phenomenon as my application.properties also has no additional parameters for modifying the resource source folder etc.
Okay, this was VERY weird. I found the solution, but I am not sure, whether it's IntelliJ, which was responsible for this problem or something else.
What I did was to edit my <script> element in my HTML file to the following:
<script src="/js/createGraph.js" type="text/javascript" >
</script>
and my intention was solely to try out, whether it would change anything. Somehow, IntelliJ told me, that it was not able to find the path (neither the js folder, nor the createGraph.js file within it) so what it suggested was to create the folder and the file (so I did, using ALT+Enter). What I did afterwards is to just copy the content of my old createGraph.js to the new file and to delete the (very strangely the same named) old folder and file and voila, everything works as expected... Very weird.
You can call your JS files present in resources/static folder like below:
<script type="text/javascript" src="js/script.js"></script>
No need to give the forward slash before the js folder.
below I am attaching screenshot for my code:
Here, I was having images folder inside the static folder so we can directly call that folder.
If you have any further doubts please feel free to visit my github amisham96
I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?
I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .
I have an simple Express application defining routes for an html file in my public folder. In this index.html file i have linked my css and js file which are in the same folder. When i use npm start it works without any problem but when i publish it on zeit-now i get error 404 for js file and "Refused to apply style from 'https://test.julienmerasli.now.sh/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled." for css file.
Here is my deployment : https://test.julienmerasli.now.sh/
Here is my project: https://gitlab.com/chaudoinblazin/test-zeit-now-css
Looking at your code - I think the problem is with the paths you used to reference the css and js files.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script type="text/javascript" src="public/index.js"></script>
<title></title>
</head>
<body>
<button onclick="buttonClicked()">This is a button</button>
</body>
</html>
The files served from the public folder will be available from your root of the website so e.g. https://test.julienmerasli.now.sh. Right now though your html will look for the css and js files in https://test.julienmerasli.now.sh/public.
So inside the html you just have to remove the public part on the href and src paths and this should work.
Not sure what you're trying to build but if you just wanna serve some static or simple API files, you might not need Express. Check out this migration guide for a good intro.
I have folder hierarchy like this
how to add css and js file in this index.jsp
browser developer tools
If you want to add css and js files inside one of the jsp files, add these inside head
For CSS
<link rel="stylesheet" href="../css/filename.css">
For JS
<script src="../js/filename.js"></script>
Here .. represents the directory above the jsp (one level up) then /js or /css will goto respective directory.
It all depends on the paths they will have from the browser's perspective. If the browser sees the hierarchy you've shown, then from any of the .jsp files in your jsp directory, you'd use
<link rel="stylesheet" href="../css/filename.css">
The .. goes up one level (from jsp to your root), and then /css goes into the css directory.
You could use root-relative URL like /css/filename.css, but that will break if you put this whole thing somewhere other than the root on the server.
See this answer for the correct way to organise your files in a Tomcat application.
The path to your CSS files should be:
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.