I'd like to use three.js library that's located online, and I've included a path to three.js file into my <script> tag inside index.html. But my script doesn't work because there's no access to three.js library.
<script src="https://threejs.org/build/three.js"></script>
Is it possible to use three.js library remotely?
Try this way:
<script src="https://threejs.org/build/three.js" crossorigin="anonymous"></script>
It is working in my project.
If it still wont working, try to find here, how to install this: Instalation Three.js
Related
I'm trying to use VKThread in React. However it doesn't appear
to be available as an npm package. according to the instructions, they say to add <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> to your project. However I don't know how I can do this in a react app.
Any help is appreciated, thanks very much!
You have a "traditional" index.html located in /public. You can add any script such as your <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> in the body there.
For my project I need to install the "Loadingbar.js" lib to one of my pages (which you can find here: https://loading.io/progress/).
I did paste the CSS in my global "style.css" file.
So, first, I just tried to put the <script></script> in my index:
<script type="text/javascript" src="assets/js/loading-bar.js"></script>
It worked for few hours, and now it does not work anymore. So I tried everything: I tried to put the <script> everywhere on each line of my index.html or even in the html of my page, in the body, under the body, under the <app-root></app-root>... nothing worked.
Also, the Angular project is sometime trolling me: the js is loaded once very rarely. If I refresh the page without changing anything- it does not work anymore.
I tried to add "defer" to the <script></script>.
I tried to wait document ready, I tried the setTimeout, but it never worked.
I tried to add the path to the script in "angular.json", didn't work.
What can I do to make this work? How do I add JS lib to an angular project?
Thanks.
First thing you should know is that in angular applications it's better to use npm dependency of any library if possible. If this is not possible and you need to use external js files, you can follow these steps:
First, put your js inside the node_modules folder. eg: node_modules/test-lib/loading-bar.js
Inside your app.module.ts, you can put this line at top of the file:
import test-lib/loading-bar.js(without node_modules)
Loading.io links their library to their GitHub account.
They offer an Angular example here:
https://github.com/loadingio/angular-loading-bar
It looks like the best approach is to install the library via npm or yarn.
I'm trying to import external JavaScript file (which uses jQuery) to my ionic 3 project.
To install jQuery, based on this answer, I ran:
npm install jquery --save
Then I can see that jQuery is working by executing some code inside $(document).ready from the first page of my app (it works).
Now I need to include reference to my external jQuery library, which I've done in src/index.html by:
<script src="assets/js/myLibrary.js"></script>
myLibrary.js uses jQuery by:
(function($, window, document) {
...
})(jQuery, window, document);
But unfortunately I get jQuery is not defined error from the library file.
I'm not sure if jQuery is not yet ready or something else, I tried adding defer attribute to the script import but with no luck.
Any ideas?
You could just do this in your html file. Please note that you can only do that when you have wifi.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I ended up putting jquery in src/assets/jquery.min.js, and then in index.html I added a script reference before the jQuery-dependent library I wanted to use:
<script src="assets/jquery.min.js" defer></script>
<script src="assets/js/myLibrary.js" defer></script
I'm not sure if that's the correct way to do this in ionic, and I'm not sure if that makes a duplicate import of jQuery [I already imported it via npm install jquery --save].
Anyway it works - FYI for anybody looking in this thread in the future.
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
Problem: I have jQuery datepicker in react app, which has to be localised in different languages(30 lang). I downloaded all the i18n file from the link (https://github.com/jquery/jquery-ui/tree/master/ui/i18n) but it has to be included as <script> tag.
Question: Is there a way to import this file? using webpackand commonjs?. I am using es6 import. Is there a way to bundle them all and import in the on file?
any suggestions are appreciated.
Edit:
Yes there's a way:
You can create a javascript function that takes the path as a parameter and creates these HTML lines:
<script src="js/datepicker-in-all-languages/datepicker-af.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar-DZ.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar.js"></script>
...................and for all other 30 languages................
And you'll just have to call this:
loadLib("datepicker-in-all-languages/datepicker-af");
loadLib("datepicker-in-all-languages/datepicker-ar-DZ");
loadLib("datepicker-in-all-languages/datepicker-ar");
Edit:
Also take a loot at Grunt which is meant for the same purpose.You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.:
GRuntJS usage(According to their official page): With literally hundreds of plugins to choose from, you can use Grunt
to automate just about anything with a minimum of effort.
Edit:
There is also a minified file of jQuery ui i18n which is being hosted by google. You can use it in single <script> tag : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js . I found it in answers here here.