JS and CSS files not loading inside html - javascript

My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.

It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."

Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you

for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />

Related

connection between files in node.js JavaScript and html

When I use import in my JavaScript file in node.js it lose the connection with my html file,
and I tried in my html file but it didn't work
i tried
<script type="text/JavaScript" src="JavaScript"></script>
<link rel="stylesheet" href="javascript">
and its work but when I used import in the JavaScript file it didn't
Your script and link are invalid.
the script connect the HTML to the javascript file so the src is the relative path to that particular javascript file.
<script type="module" src="file.js"></script>
stylesheet is CSS so the href is the path of the CSS file
<link rel="stylesheet" href="file.css">

Angular 6 : How to use css and js files from cshtml pages of mvc into Angular project

I am trying to migrate a MVC project into Angular 6.
I have css files and js files in chtml code which are used in the mvc application as below :
<link rel="stylesheet" href="~/OptumFiles/fonts-clientlibs-global.min.css" type="text/css">
<link rel="stylesheet" href="~/OptumFiles/optum-clientlibs-global.min.css" type="text/css">
<script async="" src="~/OptumFiles/analytics.js"></script>
<script async="" src="~/OptumFiles/js.js"></script>
Now i want to use these files in my angular project globally.
Things i have tried :
Created a folder FICAssets in the Angular project.
Added files in that folder.
Added their reference in index.html file.
Code in index.html :
<body>
<link rel="stylesheet" type="css" href="FICAssets/css/fonts-clientlibs-global.min.css">
<link rel="stylesheet" type="css" href="FICAssets/css/optum-clientlibs-global.min.css">
<script src="FICAssets/js/analytics.js"></script>
<script src="FICAssets/js/js.js"></script>
<app-root></app-root>
</body>
The problem is that iam still not able to load the files , getting 404 error.
Assets aren't magical, they need to be declared as such.
Open your angular.json file. Find the path
projects.YourProjectName.architect.build.options.assets
And from there, add your declared folder in it. It should keep the assets up when the project is complied.
open your angular.json.
add style in "styles": []
add script in "scripts": []
reference link :- https://www.truecodex.com/course/angular-6/how-to-include-external-css-and-js-file-in-angular-6-angular-7

CSS and Javascript are not loading

My css and Javascript are not showing when I open my file in browser via folder. My files are in the same folder which is a subfolder of subfolders
I have tried renaming files.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<script src="calc.js"></script>
You can use ./ to indicate that the css and js files are in the same directory or to indicate the current directory. This would be relative path for the css and js files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<script src="./calc.js"></script>
</body>
</html>
First of all , you want to identify,where those css files and javascript files are located.That means which folders contains particular css files and javascript files. when you integrating css files and javascript files with main html page , set the path to particular css or javascript file from current directory.if particular files are in same level with your current working directory , initialize the path to particular directory.At the same time id you working directory and particular directory are in deferent levels , at first go to particular directory level and initialize the path.(if you want to go previous(back) directory , ' .' can be used.
ex - if you want to go back 1 level './' can be used. if you want to go back two levels of directory '../' can be used.).I hope, you got the idea. cheers !

css is linked to .html file

I recently downloaded a theme namely (scalia)
it has lots of css but they are present in file with .html extension
every page of this theme open good at local computer [not localhost (i am directly opening index.html in browser)] but when upload it to hosting it shows a mime type error.
Stylesheets are linked in this format
<link rel='stylesheet' id='layerslider-group-css' href="indexf67d.html?f=scalia/wp-content/plugins/LayerSlider/static/css/layersli‌​der.css,scalia/wp-content/plugins/contact-form-7/includes/css/styles.css,scalia/w‌​p-content/plugins/scalia-style-changer/css/ssc-style.css,scalia/wp-content/plugin‌​s/mailchimp-for-wp/assets/css/checkbox.min.css,scalia/wp-content/themes/scalia/cs‌​s/woocommerce.css,scalia/wp-content/themes/scalia/css/woocommerce1.css" type='text/css' media='all'/>
I already got these css file layerslider.css, styles.css, ssc-styles.css etc. etc.
My main question is [is there any alternative of the above code? so that i can replace this code and link my css files manually]
Yes.
If you have a .css file in the same directory than your html file, you can include it that way:
<link rel="stylesheet" type="text/css" href="myfile.css">
If it's in another directory, use relative path or complete path like so
Relative: file inside folders that are in the same directory than the html file
<link rel="stylesheet" type="text/css" href="folder/anotherfolder/myfile.css">
Relative: file that is in the root of the directory containing the html file.
<link rel="stylesheet" type="text/css" href="../myfile.css">
Complete
<link rel="stylesheet" type="text/css" href="C:/Users/yourname/Documents/CSS/myfile.css">
Just visit the link in your href. Save the CSS that you get as a seperate CSS file. Replace the href in the above line with the path to new downloaded file.

How to rename paths within files in gulp?

If I have multiple script tags in my index.html
<link rel="stylesheet" href="style/style.css" />
<script src="myjs/js.js"></script>
Is it possible to write a gulp task that looks at all html files, and appends "mydir/" to the front of all paths such that the output file (of the same name) i.e. index.html is still index.html.
So when I open the file if I look at the paths, I see
<link rel="stylesheet" href="mydir/style/style.css" />
<script src="mydir/myjs/js.js"></script>
I know there is a gulp-rename, but it looks to only rename files and not contents of files.
Making this the actual answer -
<base href="mydir/">
You don't need gulp to do this for you.

Categories

Resources