I'm having some difficulty pointing to one of my JS files on my server. I have a pretty standard set up:
index.html
js folder
css folder
The difficulty is I have another folder called
6_toggle
Within this folder I have six HTML files named 1.html, 2.html, etc. I need these individual files to point to a file in my JS folder. I thought it would be:
<script src="../../js/view.min.js?auto"></script>
I've also tried:
<script src="../js/view.min.js?auto"></script>
But it doesn't seem to work. Would anyone have any ideas on how to fix this?
Assuming your tree structure looks like this:
-index.html
-js_folder
-css_folder
-6_toggle
-1.html
-2.html
-etc
from index, you first need to reach into the js folder, then the file.js like so:
<script type="text/javascript" src="js_folder/file.js"></script>
from within your 1.html and 2.html files, you'd access the file like so:
<script type="text/javascript" src="../js_folder/file.js"></script>
You must first reach into the parent folder, then down into the js folder for its children
When you have this structure
root/
-index.html
-js_folder
-css_folder
-6_toggle
-1.html
-2.html
-etc
You can access js_folder any time with <script type="text/javascript" src="/js_folder/file.js"></script> <- I think this is a best practice for accessing file asset on server. By include root, you can fotget how many .. needed to go back
Related
I'm working on a simple project where I included a simple js file to fetch out a data from api on click of a button. It was working when I had HTML file and js file in same folder and used by simply clicking on index.html . Now i am using expressjs for same and written all the HTML code in index.ejs file. For some reason, the js file has stopped working. I have tried changing the paths and carefully defining the path, also kept the file in same folder as of ejs file but it does not seem to work. Any suggestions would be helpful. The lines I have included in ejs file as are as follows. Here the js file is in the js folder of public folder of the project
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
I got this problem resolved by adding the following path to jQuery src
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
instead of
"jquery-3.2.1.min.js"
I have lots of files in sub folders and I have to include them in an html file , i.e -
<script src="folder2/file1.js"></script>
for each file .
I'm looking for an easy way to run all the folders from a provided root folder and cause it to include to my index.html all the files .
i.e -
for the folder with -
folder1>
file1.js
file2.js
folder2>
file1.js
it will be in the index.html -
<script src="folder1/file1.js"></script>
<script src="folder1/file2.js"></script>
<script src="folder2/file1.js"></script>
I don't want to concat them so please avoid from grunt concat suggestions .
Have you any smart idea ?
I'd use grunt-include-source
That way, you avoid to use concat and get the expected result.
I'm not very familiar with it so I'd refer you to this SO answer
Let's say I have folder scripts with 10 javascript files and instead of doing this:
<script src="scripts/js1.js"></script>
<script src="scripts/js2.js"></script>
<script src="scripts/js3.js"></script>
<script src="scripts/js4.js"></script>
<script src="scripts/js5.js"></script>
//and so on...
I want to do this:
<script src="scripts/*"></script>
which load ALL files in scripts
How would I go about doing this?
Won't be as easy as that, here is what you are looking for:
How can I include all JavaScript files in a directory via JavaScript file?
What you try to achieve is cumbersome from the client side. You can achieve the same through server-side scripting before you load your html file. You can use a task runner tool like grunt, gulp etc. (or write a script) that will traverse your target directory, retrieve all the *.js file paths and append their script tags in your html file.
Another solution is to use a tool to concatenate all your js files in one bundle file and only load that file from your html file. There are plenty of tools out there to do that
As far as references to directories are concerned, I understand
./ = current
../ = parent
But I am having a problem referencing my bower_components directory in this bit of HTML code. The reference to the lib folder works fine but not bower_components. What am I missing?
main.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Directory structure looks like this:
Try going to <your server>/bower_components/bootstrap/dist/js/bootstrap.min.js
It probably won't work. If your server setup is normal only public and the folders below it are accessible from the client side. From the client point of view public is the root, there is nothing above that.
As for importing bootstrap, see if you can browse what node is making available in your browser. It's probably hosting the scripts you need to reference on the client side at another url. You might also find the url in the bower documentation/examples.
You could solve this by copying or symlinking the scripts into the public directory, but that would be a bit hackish, save it for if you get completly fed up with finding the intended way.
Maybe you can try this
<script src="contacts/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
just use the full script path
I have a folder called projects and in it I have a game folder and an engine folder. I have my engine.js file inside the engine folder and I was wondering if I could access it with my game.html file from the other folder like so
<script type ="text/javascript" src ="\engine/engine.js"/>
Now, obviously the above doesn't work, but what I need to do is go back out of the game folder to the project folder and then into the engine folder.
File tree: projects folder
projects
engine
engine.js
game
game.js
What is the proper format for src to provide users with a link to engine.js?
Use a double-dot to go back:
src="../engine/engine.js"
That would be:
<script type ="text/javascript" src ="../engine/engine.js"/>