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
Related
In the Jangaroo tutorial using Maven it states"include a Jangaroo application script generated by the Maven build process". This should be created in src/main/webapp/index.html, it isn't. Can anyone explain this, or what in the pox.xml is missing?
Thanks
The misunderstanding here is that actually, the Jangaroo application script is generated, not the index.html file.
The idea is that your index.html usually contains custom HTML, e.g. loading your CSS or setting up some context. The only Jangaroo-specific things your HTML code has to do is load the generated joo/jangaroo-application.js script and run the application's main class, using its fully-qualified name (in this example, HelloWorld is in the top-level package):
<script type="text/javascript"
src="joo/jangaroo-application.js"></script>
<script type="text/javascript">
joo.classLoader.run("HelloWorld");
</script>
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Deployment
I'm trying to load external scripts from a folder into my createnew.html file and I keep getting this error saying it cannot be found:
Failed to load resource: the server responded with a status of 404 (Not found)
I'm trying to load the scripts in the head of my code, like this:
<head>
<!--C3 CSS script-->
<link href="./scripts/c3.css" rel="stylesheet" type="text/css">
<!--C3 JS script-->
<script src="./scripts/c3.min.js"></script>
</head>
My files are arranged like this:
->public
->views
-createnew.html
->scripts
-c3.css
-c3.min.js
Please help me understand why this doesn't work.
As this question became more popular than expected, I decided to point other problem-havers in the right direction:
Let's say you have organized your files like this:
- server.js
-> MyWebsite(folder)
- index.html
-> js(folder)
- myscript.js
The paths you use are relative to the "working directory" you are in.
When not using a server, and only developing websites locally on your computer, this working directory will be the relative path from your index.html file to your scripts. In this case it would be ./js/mysript.js.
When using a server you need to tell it where this working directory is. In the case of Node.js you would do something like this app.use(express.static('./MyWebsite')) and your js files would be referenced by /js/myscript.js
Notice that when loading from a server you prefix with / instead of ./ since the / really is just a part of the URL to your file hosted by your server, while ./ is specific to the file system.
Change
"./scripts/c3.css"
to
"scripts/c3.css"
You can refer to this question about the relative path of files in HTML.
To refer to the current folder,
./ works only in non-strict doctype mode, while . works in both modes.
So you may try "scripts/c3.css" instead of "./scripts/c3.css"
I'm using a local webserver to serve a simple, static html page. The project has the following folder structure:
/site
/build
index.html
/bower_components
Index.html is accessible on http://localhost:5455/. In index.html I am loading some assets from ../bower_components:
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
But neither firefox or chrome seem to be able to load resources from this parent folder. I get the following error:
Cannot GET /bower_components/jquery/dist/jquery.min.js
So it looks like it isn't looking in the parent ../bower_components, but in build/bower_components, which obviously isn't right. Why is this, is it some sort of security protocol? And how can I correct this?
If your server is mapped to the build folder, you will NEVER be able to access parent folders, for obvious security reasons!
Some solutions are:
1 - Map your server root to the site folder
or
2 - Put the bower_components folder inside the build folder
You did bind the /build folder to the root of the web server.
You have to bind the /bower_components to some sort of web served address before attempting to reference it in HTML.
I started learning JS and at the moment I am working on Require.js.
Here is the deal, I have simple html page and js in it:
<script data-main="js/main.js" src= "js/lib/require.js" type="text/javascript"></script>
I do really have main.js in the root/js folder but by some reason page is looking for main.js in the root. Error:
*Failed to load resource file:///work/programs/brackets/4proj/main.js*
If I put main.js in the root (data-main="main") all will work as expected but I don't want to have a lot of *js in the root, even 2 js files. I saw in the require.js examples that it is possible but I have had no success with it.
What I've tried:
/js/main.js
./js/main.js
//js/main.js
and all the same without extension. It's still not working.
Here is project structure.
Project folder - 4prog/
/js
/js/lib/ <- jquery.js,require.js
/css
index.html
p.s. I am using Ubuntu + brackets + chromium.
From the docs:
http://requirejs.org/docs/api.html#jsfiles
.js does have meaning to require - it makes it behave like an absolute path.
So does prefixing with "/".
You didn't explicitly mention trying
<script data-main="js/main" src= "js/lib/require.js" type="text/javascript"></script>
Which is what works on my system (from file: !), so I can only assume that either you've got something else going on, or you didn't try that.
You didn't mention your version of require, your OS, or your browser, so that could be it, but it's more likely that trying to do an absolute path with require is messing you up without serving from a web server.
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