I have three files in my templates folder wheree there is also my main.html file. However when I load the html file I get a 404 error for these 3 files. This is how I've included them in the head of the html:
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
They are all located in a templates folder in the same folder as my main.html.
Why aren't they being recognised?
Thanks
Your local paths are not resolving correctly. Without seeing your directory structure I can't say for sure exactly where things are going wrong -- I'm a little confused as to where main.html and base.html are residing.
If main.html is the file being loaded in the browser, your script sources should be based off that directory. If your template directory (we'll call it 'templates') is a child of the directory where main.html resides, you want:
<script type="text/javascript" src="templates/date.js"></script>
<script type="text/javascript" src="templates/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="templates/daterangepicker.css" />
Alternatively, you could just resolved your entire URL to the appropriate path:
<script type="text/javascript" src="http://www.myurl.com/templates/date.js"></script>
Related
I can't link my css and js files to my html file.
The most common problem I've seen with other peoples codes was that their files were not in the same folder but mine are and yet it is still not working.
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
If you are using the following:
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
I expect your folder structure to be as follows:
www/
index.html
app.js
style.css
Is that correct?
Your code seems OK but what is the exact issue you face? Both CSS and JS not loading?
FYI the files do not need to be in the same directory. Usually, they are separated into folders to keep things clean:
www/
index.html
js/app.js
css/style.css
Do you see any errors in your browser console? That could help you find the mistake
try this make the links as simple as possible e.g
and for js use the script tag within your Html and see if it working then you go for the linking
I'm building a website and trying to use Bootstrap, however I'm unable to successfully call bootstrap.min.css and bootstrap.min.js.
I have Bootstrap unzipped in a new folder titled "Bootstrap" in my htdocs folder. In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier. I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:
Folder Structure:
Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.
myWebsite folder with test.html
HTML (this is the test.html file in my "myWebsite" folder):
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
I tried running the example code off of Bootstrap's website and am getting a 404 Error for both of those files.
Since creating a new folder and then specifying the href wasn't working, I tried putting the sample code from Bootstrap's website directly into my "Bootstrap" folder and when I do this it works perfectly.
HTML (this is the test.html from the "Bootstrap" folder):
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I think there is something with the filepath I specified but I've been unable to get it to work after working on it for the first half of the day. What I'd really to know is how do I correctly call the "bootstrap.min.css" and "bootstrap.min.js" files while still maintaining my current folder structure? Any help/advice will be greatly appreciated.
Thanks
The paths for files are relative to your html file. For your test.html located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js and js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js and ../js/bootstrap.min.js. The "../" will traverse up one directory into the parent of the current directory.
All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).
So your bootstrap location is like this:
src="Bootstrap/js/bootstrap.min.js"
Without a leading / character, the browser will append the src location to the current href location. For example, if the requesting page was at:
http://example.com/mydir/test.html
Then the browser would look for the bootstrap url at:
http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!
In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory. Your src location would look like this:
src="/Bootstrap/js/bootstrap.min.js"
When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/).
This would give an effective url for the browser to look up as follows:
http://example.com/Bootstrap/js/bootstrap.min.js
Which would be the correct one.
In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides. restart the webserver if necessary to reflect the changes. This worked for me :)
I had the same problem when using these lines
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I have changed them to:
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
I got rid of that error now. I hope this is helping.
I'm having a hard time getting my project to detect my less.js folder.
I'm using laravel 5.1, and I'm not sure where to put my less.js folder - since for Bootstrap and jQuery I just imported the src from a URL.
I currently have my less.js folder I downloaded under:
resources > assets > less > less.js folder I downloaded
I currently have my styles.less in my views while I try to figure this out.
My app.php head:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
I'd appreciate if anyone could quickly let me know where to drop the folder!
Thanks!
edit:
Screenshots:
http://imgur.com/a/SDmE3/all
edit2:
http://imgur.com/a/8vQTm/all
The error in question:
Status 500 Type Script,
http://localhost:8000/reviewcourse/%3C!DOCTYPE%20html%3E%3Chtml%3E%20%20%20%20%3Chead%3E%20%20%20%20%20%20%20%20%3Cmeta%20charset=
Only assets published at public/ folder are available. So, you need to drop files there:
public/assets/less/download_folder/less.js
Then load it with:
<script src="{!! url('assets/less/download_folder/less.js') !!}" type="text/javascript"></script>
Another way/solution is to publish assets from /resources to public/ via Elixir:
elixir(function(mix) {
// location, origin
mix.copy('assets/less/download_folder/less.js', 'resources/assets/less/folder/less.js');
});
EDIT
I will assume that less.js is inside of public/assets/less/lessjs/dist/less.js. Then, load it as:
<script src="{!! url('assets/less/lessjs/dist/less.js') !!}" type="text/javascript"></script>
use this script at your html head
<script src="{!! asset('less/less.js') !!}" type="text/javascript"></script>
I am new to JS and I've tried many different ways to try and get this to work but to no avail. (I looked at the other posts but their solution didnt work for me)
My project folder is organized as follows:
+-+ project
+-- css
+-+ js
| +-- index_js.js
+-- index.html
I have got it to work with the index_js.js file outside of the js folder by assigning the script tag src to src="index_js.js". But when I try to assign it to src="../js/index_js.js" while it is in the js folder it doesn't work and won't give me an alert. I have also tried to assign src="/js/index_js.js" but it still does not work.
My index.html is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="../js/index_js.js"></script>
</body>
</html>
My index_js.js is:
alert("inside of the js folder");
That needs to be:
<script type="text/javascript" src="js/index_js.js"></script>
Or even:
<script type="text/javascript" src="./js/index_js.js"></script>
By specifying ../js, you're searching for a js directory which is on the same level as your project directory.
Your index.html should be like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
</html>
Using
src="../js/index_js.js"
in the code will look for the "index_js.js" the parent folder of "project".
../ refers to up one level.
In the given code, you are at /project/index.html
When you do ../ you are moving to the parent folder i.e /root/project/
Now, when you give
src="../js/index_js.js"
it looks for the js file at:
/root/js/index_js.js
The correct code would be:
<body>
<script type="text/javascript" src="./js/index_js.js"></script>
</body>
or
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
By expressing "../" you will quit your current project folder an move to the root folder. Your script then tries to find the subfolder "js" and the file in a directory that does not exist. Your correct code would be:
<script type="text/javascript" src="/js/index_js.js"></script>
Since, you have the js folder on the same directory as your index.html file, you don't need to use any backslashes.
<script type="text/javascript" src="js/index_js.js"></script>
Now make sure;
You have js folder and index.html file both in the same
directory.
The folder name js is as you have mentioned.
The file name is correctly placed i.e index_js.js and it is inside the js folder.
Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unzipping the files, the index.html page works (mostly), right out of the box.
The process I've gone through in the attempt to integrate it into a new rails app:
Transfer all CSS files to assets/stylesheets folder
Transfer all JS files to assets/javascripts folder
Referenced all JS and CSS files in application.js and application.css
Transfer all images to assets/images folder
Generate new pages controller/view, and moved the previously discussed html file into this view
Assigned root to above html file
The issue I'm running into is that the all of the JS and CSS don't appear to be executing. I have JS and CSS include tags in the header.
I've tried rake assets:precompile, but that wasn't successful.
Any tips on where I'm going wrong here?
Additionally, the index.html file includes a bunch of CSS setup in the head, ie:
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">
and a bunch of javascrip tags at the bottom of the body, ie:
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>
Am I correct in understanding that with the asset pipeline, these callouts aren't required in the view? Shouldn't all the CSS and JS be precompiled in application.css and application.js?
The issue was that I had brought over all CSS and JSS files that were included with the template, but the folder also contained CSS and JS that was not required, and some of these files caused conflicts when being loaded in the asset pipeline. Once I pruned out all files that weren't required, all worked as expected.
As a summary:
Move all required CSS files to assets/stylesheets
Move all required JS files to assets/javascripts
Explicitly include/require each of the CSS/JS files in their respective application.css and application.js files.