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
Related
I have got 2 files: index.html and index.js. I am using them to try and do autobahn communication. Autobahn works, but 'When' doesn't work.
I have used bower to download and install Autobahn, and then manually included autobahn.js from withing the html. I have done the same for When, but an error appears in the When library.
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Autobahn</title>
</head>
<body>
<p> Fancy paragraph! </p>
<!--Bower-->
<script src="./bower_components/module/module.js"></script>
<script src="./bower_components/autobahn/autobahn/autobahn.min.js"></script>
<script src="./bower_components/when/when.js"></script>
<!--Node.js-->
<!--<script src="./node_modules/autobahn/lib/autobahn.js"></script>-->
<!--Browserify-->
<!--<script src="./bundle.js"></script>-->
<!--The actual main script file-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
When I open index.html in a web browser I get the following:
Found the answer. The deal was to install the libraries using npm. After that in the node-modules folder there are 2 folders containing the libs:
1) autobahn-browser
2) when
After including them like this it worked like a charm:
The reason to have src and dist folders is pretty clear: we change source code commit it to repository and use compiled dist files for production.
But what could you recommend for development? We still want to keep src clean from compiled file and make it very fast to review the changes.
Before we just transpiled SAAS into CSS and put it into source and keep JS files as they are(without compiling in one file or coping them to dist). And now we decided to rethink the concept.
we are doing web development, but I think question is more broad.
If I well understood, you are looking for a development architecture/workflow to directly serve you sources to the browser (and use DevTools edition features btw). In fact, there are 2 things to do to achieve this.
1) For compiled/transpiled languages (SAAS, LESS, TypeScript, ...) and unsupported languages (ES6, ES7), you will need to compile/transpile them on the client side. Tools like LESS.js, typescript.js, BabelJS are great to do that. I don't know any SAAS compiler implementation in Javascript.
2) Then, you need 2 different html indexes. For example index.hml for production and dev.html for development.
index.html with bundled (dist) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>
<body>
...
</body>
</html>
dev.html with all sources (src) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title (Dev)</title>
<link rel="stylesheet/less" type="text/css" href="src/file1.less" />
<script type="text/javascript" src="src/file1.js"></script>
<script type="text/javascript" src="src/file2.js"></script>
<script type="text/javascript" src="src/file3.js"></script>
<script type="text/javascript" src="lib/less.js"></script>
</head>
<body>
...
</body>
</html>
This way, developers access the web app using, let's say http://localhost/dev.html and can enjoy all the goodness to have sources right in the browser. Without taking care of the compilation.
To apply such an architecture you may need to adapt client and/or server code and also build tools to work in both mode (prod and dev).
Hope I helped.
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.
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.
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>