Referencing Three.js in HTML - javascript

I am using c9.io, an IDE to code and quickly run a site to test your code. I have tried importing this outside of c9, and it still does not work. (I know it isn't a script error related to three.js itself.) In my HTML, I have this snippet:
<body>
<script src='three.min.js'></script>
<script src='scene1.js'></script>
</body>
I require the THREE namespace in my scene1 JavaScript like this:
import THREE from "three.min.js";
Is this all correct? Someone has tested this code, and said it worked. I have no folders in my hierarchy, just the three.min.js script, the scene1.js script, and my HTML script. Can anyone spot my error out?

Putting the script in the header works just fine, despite every tutorial and the three.js docs saying it should be in the body.

you can add three.js in html by:
search cdnjs threejs.
click the cdnjs website.
select latest threejs version from dropdown list with asset type javascript.
copy any one of the urls and use it in <script src="that url"></script>for e.g:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js" integrity="sha512-6p9lGA4Cm89KiwN1CixiOVQU2H9e13LeYoN6/Hj/qoUhtrMW5vNiqQz9Z96Z7/I8u89ghL6SPBz9na5HFVzF3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Related

How do I put a Processing 5 sketch with an image into an HTML page?

I'm setting up a web page that will have space for 3 different p5 sketches. The problem is when I try to load a p5 sketch into an index.html page, it does not load properly or work properly. However, when I attempted the same thing with a p5 sketch that did not include an image, it worked perfectly fine.
I have tried using the <script src= script src="sketch.js"></script> and this has worked for p5 sketches that do not include images, however it did not work for any sketches that have images with them.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script;
<script src="sketch.js"></script>
You can't just access local files with JavaScript like you do with HTML. You need to use the File API as detailed here: https://www.html5rocks.com/en/tutorials/file/dndfiles/
Source: Local file access with javascript
Regarding the "place sketches on Page" problem. I think the best way to do this is as detailed in this article: https://github.com/processing/p5.js/wiki/Positioning-your-canvas#relocating-the-canvas

Foundation 6 - Console Warning : Tried to initialize magellan (any JS plugin) on an element that already has a Foundation plugin

I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js at line 180 :
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?
UPDATE
For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:
External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.
The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2

How do I link my HTML with my jQuery?

Firstly sorry for the post, I'm pretty new to coding, I'll try and keep it short and sweet.
Simply put, when I include my jQuery code inline, I.E. beneath my HTML, it works fine - the element I am trying to animate 'hides' and then 'shows' as it should.
However, when I make my own separate jquery.js file and put the code in there, it fails to render.
I've got the cdn script from google and included that, alongside a script and src to where my file is located inside my project folder, but still no luck.
Inside my project folder I have a 'script.js' folder, and then within that a 'jquery.js' file.
Here's the code:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="script.js/jquery.js"></script>
</head>
<div class="content">
<h2> Hi there</h2>
<h3> Take a look...</h3>
</div>
Here's the jQuery:
<script>
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
</script>
(Upon 'inspecting' the problem in chrome I get an error which says "jquery.js:1 Uncaught SyntaxError: Unexpected token <) - But I can't see where I am mis-using a '<'.
Thanks in advance, and please feel free to tell me if I have left out anything important.
You need to remove the <script> tags from your jquery.js file, those are HTML tags that are used for implementing inline JS, the error you are getting is because those tags are not valid JavaScript. Your JS file should just look like this:
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
As far as folder naming, there's nothing wrong with having a period in your folder name, but as others have suggested it would probably be a good idea to remove the .js part from your folder name even though it's not technically wrong and not what is causing your issue.
Don't call your folder script.js, just call it "script".

Highcharts not loading on PHP page

I am trying to implement Highcharts to display data on my web application. At the moment, I just want to see how Highchart works on my website so I have simply copied code from this fiddle and implemented it on my site. But for some reason, the chart does not display.
It may just be my inexperience (or quite frankly, my stupidity) but I don't know why the fiddle isn't loading. Have I missed anything?
Here is what I have done:
I have added the following to the head of the page:
<script src="https://code.highcharts.com"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="javascript/chart.js"></script>
chart.js is a seperate file, which consists of all the JavaScript from the fiddle.
Whenever you observe a problem, the first thing you need to check is whether there are any errors. When it comes to Javascript, you need to check the browser console. In this case, the $ in the error message is a strong hint that you forgot to include a script tag before the other script tags having its src attribute pointing to the location of jquery.

Multiple javascript files conflict

I'm currently making a form for uploading new members to a web page. I built the form using JotForm which includes js files for controlling the style (hide/show fields, fields that are required turn red, etc.)
The js for this form worked fine on its own, but I also included a picture crop/upload as an extra. This also worked when I was testing it in a separate web page on its own, but now combined with the form, the js conflicts and I don't know how to stop that.
My script head section looks like this:
<!-- Jotform js -->
<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10027" type="text/javascript"></script>
<script type="text/javascript">
JotForm.setConditions([{"action":[{"id":"action_0_1448505712729","visibility":"Show","isError":false,"field":"77"}],"id":"1448505521328","index":"0","link":"Any","priority":"0","terms":[{"id":"term_2_1448505712729","field":"68","operator":"equals","value":"Librarian","isError":false},{"id":"term_1448505745204","field":"68","operator":"equals","value":"Social Sec.","isError":false},{"id":"term_1448505752197","field":"68","operator":"equals","value":"Press & Publicity","isError":false},{"id":"term_1448505759596","field":"68","operator":"equals","value":"Webmaster","isError":false},{"id":"term_1448505768860","field":"68","operator":"equals","value":"Tour Manager","isError":false},{"id":"term_1448505778873","field":"68","operator":"equals","value":"Merch Rep.","isError":false},{"id":"term_1448505785856","field":"68","operator":"equals","value":"Ordinary Member","isError":false}],"type":"field"}]);
JotForm.init(function(){
setTimeout(function() {
$('input_76').hint('e.g. 1st, 2nd, 3rd');
}, 20);
JotForm.clearFieldOnHide="disable";
JotForm.onSubmissionError="jumpToSubmit";
});
</script>
<!-- Image cropper js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.cropit.js"></script>
<script src="js/index.js"></script>
Because the prototype.forms.js and jotform.forms.js appear first, they seem to work whilst the image cropper does not.
If I put the image cropper files first, the reverse happens and the image cropper works but the other javascript doesn't.
Having read up on this a lot of people talk about this being jQuery conflicts, but I'm not entirely sure what the problem/solution is. All I want is for both features to work simultaneously.
All help appreciated, thanks.
Source (image cropper working only): http://concert-band.co.uk/new/Forms/index2.php
Source (form validation working only): http://concert-band.co.uk/new/Forms/index3.php
Slightly my fault as I realised that there was no conflict with the index.js or jquery.cropit.js, it was actually some embedded jquery at the bottom of my <body> I had forgotten was there. I've now implemented jQuery.noConflict() the normal way and it works fine. Thanks for your help.

Categories