This seems so simple, but I just can't get pixi to work in my module.
in the index.html
<script id="main" type="module" src="./src/index2.js"></script>
in the index2.js
import * as PIXI from './pixi.js';
let app = new PIXI.Application();
Error: Uncaught TypeError: PIXI.Application is not a constructor
I have the pixi file in the right place. Can't figure out why I can't get this thing to work. Do I need any other support files? Thanks
Oh weird. With my limited understanding of modules, I thought you could never just go like this:
<script type="text/javascript" src="./src/pixi.js"></script>
<script id="main" type="module" src="./src/index2.js"></script>
I thought with modules, a module could not communicate with scripts included this way. Turns out they can I guess. That was the big thing missing this whole time...I think.
Related
It's been a time since I have been programming with Vue.
But when I started entering something like vuedef in a newly created .vue file it auto-suggested me the following instead of writing it all on my own:
<template>
</template>
<script>
</script>
<style>
</style>
I can't remember how I did that but I guess it was a certain word I had to type.
Maybe it comes from an VS-Code Addon?
vuedef comes with Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur
For any modern Vue3 apps, you can use Volar (it's officially the one to use now too): https://marketplace.visualstudio.com/items?itemName=Vue.volar
Those 2 are also quite nice:
Vue3 snippets: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
Vue snippets: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
You should have plenty of choice after that!
You can also create your own snippets of course directly into VScode: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
When I tried to include the stripe dependency only for the template where I need it (in laravel blade):
#push ('head_scripts')
<script src="https://js.stripe.com/v3/"></script>
#endpush
..I got the error 'ReferenceError: Stripe is not defined'. So I included it in my main "head" partial, so it was included everywhere. Then I ran into the same error when going into the admin section, because it's not included in that template.
But does it really need to be included everywhere?
It is only used in one vue component like this:
<script>
let stripe = Stripe(`pk_test_zzzzzzzzzzzzzzz`);
let elements = stripe.elements();
let card = undefined;
This component seems to be evaluated even when it isn't rendered. Can I get around this issue in some way?
I was having this problem in a Vue app not using Laravel.
But to fix it i put the script <script src="https://js.stripe.com/v3/"></script> in my index.html
Then when referencing Stripe in a component i used window.Stripe That pointed to the script and fixed the ReferenceError: Stripe is not defined error.
Putting script in my index.html worked, but gave me performance issues when I published because it loads the script on every single page, instead of just where it's needed.
So instead I used import {loadStripe} from '#stripe/stripe-js/pure';. It delays loading Stripe until loadStripe is called.
This article helped me use the import:
Importing Stripe.js as an ES Module into Vue
I've written the following in an Aurelia app
import "bootstrap/css/bootstrap.css!";
import "./app.css!";
and I want app.css second in since it overrides bootstrap.css styles. However, I'm getting app.css first since I presume the system.js loader is running them in parallel and since app.css is the smaller of the two it gets loaded first.
Is there a way in jspm to define a dependency between these two files to control their loading order is is there some other way?
Many thanks in advance! :)
You could try to import the css using System.import.
E.g. in your index.html:
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
But keep in mind that this way you have to make sure that system.js is served with your app. So you can't bundle your whole app as an self-executing bundle.
We have some stuff in the pipeline that should help you with this issue. If you check out this:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
I know that Aurelia will be passing the CSS files to the loader in order, but I'm not sure if we'll be able to guarantee loading order. Hopefully Rob can come over here and give a proper answer to this, though. I'll point him in this direction.
I had exactly the same problem. Controlling order of CSS is not possible in JSPM. I solved this problem with SASS and some tricks. Here's what I've done:
In html you give main element some id:
<html id="some-id">
Then you create sass file that will host your overrides (_overrides.scss):
#some-id {
#import "buttons";
}
Now your buttons.scss can override styles from bootstrap (_buttons.scss):
.btn-default {
background-color: #B6B3C7;
border-color: #B33A3A;
}
This works thanks to the principle in CSS - most specific selector wins. By wrapping all your customizations in #some-id in scss it will produce code with every bit of code that is imported into curly braces prefixed by #some-id. This way your selector will always be more specific than bootstrap one and will override it.
I don't know if this will be sufficient for you as you don't mention scss, but it was for me.
I've faced similar issue during development.
The code below has helped me solve my problem.
Now everything is loading exactly the way I want it.
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
Thanks LazerBass for this suggestion.
I am a beginer to DOJO , finding difficulty to set up DOJO
This is my Program :
<html>
<head>
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function init()
{
alert('Click on the Hello World Button');
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
I have used the dojo.js file from the external site itself that is by
**<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>**
But still i am getting errors .
Please see the screen shot related to errors
http://imageshack.us/f/545/dojoh.jpg/
Also i have downloaded , the DOJO Latest relaese , and kept this in C:\dojo-release-1.6.1
Could anybody kindly please tell me , as what should be the source path to dojo js , i tried the below way , but doesn't know why this js file hasn't been recognized
Thank you for your time .
You are on the right track, there's just a small issue with your HTML. The following snippet is not valid:
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
You can't have a <script> tag within another <script> tag. Remove the outer tags, so you're left with just this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
This is what caused the "unexpected end of XML source" error. Also, since the error prevents dojo from being loaded, you get the "dojo is not defined" right afterwards.
Secondly, you cannot require dojo modules with wildcards ('*'). You have to explicitly require the ones you want to use. So the following is not valid:
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
Lastly, you probably want to run your Dojo application through a web server, not just as a local file. It may work for now, but you're bound to run into some weird issues after a while.
Hope this helps.
In the HTML code you have here Dojo won't load, as script tag loading dojo is inside another script tag. Get rid off the outside script tag.
You should only require modules that you need. Here you do not seem to need any of the extra dojo modules.
Here is an example of having dijit.form.Button http://dojotoolkit.org/reference-guide/dijit/form/Button.html It will give you better idea of how you can load modules.
To load dojo.js file from your computer, if your HTML file is in projects dir then you may add your dojo-release-1.6.1 dir inside projects dir and may want to rename it as libs. Then in your HTML file you should load dojo.js file as
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
In addition to the other answers, please note that your sample code reflects Dojo 0.4 APIs from about 5 years ago. The code has been refactored significantly since then. Most widgets live in the dijit package
I've read the Jquery docs page on conflicting scripts. But i'm not really understanding it. As well, it's multiple .js files that are conflicting, and they have the same names to boot. (but they aren't the same within.)
I have a set of .js for a fisheye effect. Then i have another set of .js for draggable. Draggable won't work with the fisheye scripts, and vice versa.
These links are for the fisheye effect.
<script type="text/javascript" src="HandFan/jquery-1.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
<script type="text/javascript" src="HandFan/ui.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_002.js"></script>
These files are for draggable.
<script type="text/javascript" src="Draggable/jquery-1.js"></script>
<script type="text/javascript" src="Draggable/ui.js"></script>
<script type="text/javascript" src="Draggable/ui_002.js"></script>
From what i understand of what the doc said,
File1.noConflict();
// Use script File1 via File1(...)
File1(document).ready(function(){
File1("div").hide();
});
// Use script File2 with $(...), etc.
$('someid').hide();
I'm not sure what to do with regards to the multiple files, I'm sure that speaks to how new i am to this.
EDIT
After looking online, i thought it would do me good to use a single jquery.1.3.2.js file, hosted by google. However, that didn't work. So it would seem my problem is that i need each of the scripts above for my effects to work, and this just seems wasteful to me. Is there a more efficient way to do this?
I don't fully understand why you need to include jQuery more than once. For example, the draggable plugin will work fine if you've already included jQuery further up on the page. The same goes for any UI scripts you're including.
Your script declarations will likely work better like this:
<script type="text/javascript" src="scripts/jquery-1.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/ui_002.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
The draggable stuff should work fine without needing to have its own set of the same base libraries defined.
Given this might not be working for you, let's see if it's the jQuery files that are the problem at all.
The jQuery noConflict() method allows you to assign different variables to call jQuery instead of the very common $ symbol. See if the following works:
var j = jQuery.noConflict();
You can then use the letter j where you would ordinarily use $. For example:
j('#myElement').draggable();