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" />
Related
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.
I am trying to load my stylesheets and js files in Meteor. I have an index.html file. This is what I was doing at first:
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
There were lots of stylesheet files and script files. This was working fine but if i wrote a url like: 'localhost:3000/manage-user/add', everything stopped working. I have read loads of answers where they have mentioned that I need to make a lib folder and in that folder, I need to make a css and a js folder, but it's not picking up my files, especially my 'style.css' file which overrides styles of bootstrap and all.
assets folder should be inside the /public folder, then try add the / to the begining of the href value.
<link href="/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
URL can be absolute and relative.
Absolute should starts from protocol value(http://, https://, ftp:// etc) and then domain name, port, path and query part.
Relative can be started either from slash or any other character.
If URL is started from slash it's assumed its value is relative to domain's root.
If URL is started from any other character it's assumed it's value is relative to current URL(or value in tag).
Anyway value localhost:3000/manage-user/add means for browser:
"take current page's URL and append this value to its end".
So your files are tried to be fetched from something like http://localhost:3000/localhost:3000/manage-user/add
To properly add your styles.css and/or your templates/components to your app, you must register/add them as an import path to the body.js.
CSS
Go to your body.js.
Add import '/imports/ui/stylesheets/styles.css' (copy/paste this line)
JS - Templates/pages
Go to your body.js in your layouts folder.
Add import '/imports/ui/pages/[yourDirName]/[yourFileName].js'; (copy/paste this line)
BONUS Content!
JS - Components to import into your html templates (optional)
Go to your pages folder.
Select the proper directory.
Select the js file that is importing your html template file.
Import the component to the js file.
import '../../components/[yourDirName]/[yourFileName].js;
Example import '../../components/hello/hello.js';
I want manage path for JS and Css file without changing filder structure
currrenlty my path is
<link rel="stylesheet" href="#Url.Content("~/Content/newTheme/css/font.css")" type="text/css" />
But i want path Like
<link rel="stylesheet" href="#Url.Content("~/Myproject/Content/newTheme/css/font.css")" type="text/css" />
Without changing folder structure
One option is copy all files and folders in Myproject folder. But problem duplication of files.
Are you sure you have a folder name "animate.css" I can see written twice so it can be a issue. secondly if MyProject is name of your folder you don't need to write that in path.
Simply using ~ will take the root of the URL (the path you see in browser). The first one should work, just remove the duplicate animate.css from href attribute.
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.
I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?
You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>