I have this animation, see: js fiddle example
When I tried to convert it notepad++ .js and .html documents, I got:
uncaught reference error: Raphael is not defined.
What should I do to fix it? I gave the reference as:
<script type = "text/JavaScript" src ="Raphael 2.1.0.js"> </script>
You are not including raphael.js javascript file to your document correctly.
Add code below to your .html file, right before enclosing </body> element and any other javascript which are doing work with raphael.js library. (In other words, all javascript in js fiddle window goes below script include tag.)
<script type="text/javascript" src="path/to/raphael.js"></script>
// ... your raphael.js related javascript is located here ...
</body>
The reason why it works inside jsfiddle is that you can see from left upper corner of the page that Raphael 2.1.0 is selected, so jsfiddle includes it automatically to the page.
Hence, you should either download raphael.js file to your project folder or use extranal cdn url for the resource, such as http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js (but be aware, if location changes your code will stop working.)
Cheers.
Related
No matter how I choose to add a javascript file to a html file, it doesn't seem to work. My original code is longer and has more stuff in it but I thought I would isolate the problem and see if with a very basic bit of code I would get the same problem (which I do).
I've tried adding the script tag to the head and to the body (at the start and at the end).
Brackets states that the function is never called and also seems to think that alert doesn't exist. If I add internal javascript it works.
in Chrome's console it reads:
test.html:1 Uncaught ReferenceError: helloWorld is not defined
at HTMLButtonElement.onclick (test.html:1) onclick # test.html:1
when I click the button.
HTML is:
<!doctype>
<head>
<title>testcode</title>
<script src="test.js"></script>
</head>
<body>
<button onclick="helloWorld()">Press to say hello world</button>
</body>
test.js is in the same folder and is:
function helloWorld() {
alert("Hello World!");
}
UPDATE: I changed nothing and just reopened the browser, now it works (currently missing python a lot).
The code is working for me. Maybe it's the path of the files. If the files are in the same level, it should works..
- index.html
- test.js
But if the script is in a folder, you should change the script tag. Exemple :
- index.html
- /js
- test.js
<script src="js/test.js"></script>
There is another case, if your html page is /article/hello and your js /test.js you should change the script tag with <script src="../test.js"></script>
It's working for me. I just copied and pasted your exact code and it was working for me. Make sure you have saved both html and js files in same directory.
In order to check if JS file is included just open Developers Options (Ctrl+Shift+I) in chrome and then see if you get any error like this(in case js file was not included)
Hi I am trying to run some three.js examples locally on my machine. I know there are some problems with security so I need to set up a local server. So I'm running a local server with python. The background image and text displays but no animation is happening.
I checked console and getting the error THREE is not defined. I've downloaded three.js and put that folder in my project directory - any ideas on what's happening here?
The animation works in the browser when accessing from the three.js (examples) page. My script src is the same as the output of the command pwd when I am working on the command line in the three.js-master directory, as seen below:
<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>
Hi most common reason for this is that either you are not adding three js into your project as I can see in your given code snippet
/home/iiiiiii/Desktop/test/build/three.js
but given path is not a valid path to give inside a project I will suggest moving this file to the project folder like other js files you added in the given snippet.
Or Simply you can add a CDN for Three js in your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>
Just put your <script src="three.js"></script> EXACT below the <body> tag that will help.
Does this library need to be called at the top of your document or after the page has been rendered?
I notice you dont have a type set when linking your libraries. try:
<script type="text/javascript" src="/home/iiiiiii/Desktop/test/build/three.js"></script>
I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!
I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/
In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers
I have just started learning jQuery today, i have written up a code in a javascript file. This code is designed to make a button fade when hovered over it, and then return to normal after moving the mouse away. Now as i have just said, i am very new to jQuery, and that means i am thinking this is down to setting it up wrong. Here is my javascript contents :
$(document).ready(function(){
$(".buttons").mouseenter(function(){
$(".buttons").fadeTo("fast",0.25);
});
$(".buttons").mouseleave(function(){
$(".buttons").fadeTo("slow",1);
});
});
This javascript file is saying to fade my class "buttons" when i hover over them.. I have linked my HTML file to this js file with:
<script type="text/javascript" src="script.js">
I know that links up to the javascript file correctly, as i open my html and the console says "$ is not defined" on line 1. Now that is the very first line of my javascript. So clearly my html is opening my JS file, but isnt liking the $ on the very first line.
Again, ill repeat, i am very new to this and anything that should be obvious, will not be obvious to me. Thanks for any help i get.
The dollar sign belongs to jQuery libraries namespace so you need to include jQuery before using it. After including the library you can use these functions, e.g. for selection via $('.classname').
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
This includes the latest jQuery release in the minified version. You can load and host this file local as well.
Did you include jQuery in your html file? Something like
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
This must be included before the first use of $, thus before including your script.js
I am learning HTML5, and i use Three.js 3D engine. following this example, the tutorial assume i included three.js file into my HTML file. However, i found two files with that name, so i included both but nothing appear to work.
In my html file:
<script src="three.js/build/three.js"></script>
<script src="three.js/src/Three.js"></script>
Three.js package is in the same directory as my html file and it's in a folder called three.js.
Am i including the wrong file(s)?
EDIT
When i debug in Mozilla FireFox, i got this message:
[13:41:04.275] ReferenceError: $ is not defined #
The line causing the error is this:
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
Thanx for help.
If the js file is in the same directory you should just do
<script src="three.js"></script>
The path to the file inside the src attribute is relative to the current file.
Since r50 it should be:
<script src="three.js/build/three.min.js"></script>