I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>
Related
I have the following setup in my qUnit.html file
<html>
<head>
<Title> Batch Processing Tool Unit Test Report</Title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<script id="sap-ui-bootstrap"
src="../../openui5/resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"BatchProcessing": "../../",
"test.unit": "./"
}'
data-sap-ui-frameOptions='deny'>
</script>
<script>
jQuery.sap.require("sap.ui.qunit.qunit-css");
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.qunit.qunit-junit");
jQuery.sap.require("sap.ui.qunit.qunit-coverage");
QUnit.config.autostart = false;
sap.ui.require(
[
"test/unit/controller/InputsView.controller",
"test/unit/controller/TableView.controller",
"test/unit/controller/DetailsView.controller"
],
function() {
setTimeout(function() {
QUnit.start();
}, 5000);
}
);
</script>
</head>
<body>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
The problem is that when I go to look at my code coverage qUnit tries to cover every .js file in my project. How can I tell it to ignore certain files that I don't want to test. Is it possible to do it within the qUnit.html file or does it have to be strictly done through grunt?
I found an answer after looking around for a while. Here it is for anyone running into similar problems.
https://openui5.hana.ondemand.com/#/topic/7ef32428dc7c4c048a8d7e8de0a556fb
So I want to use the console of Mozilla in my computer to see what errors have the page that is normally executed by Pepper robot in his tablet, because console.log() is not displayed on Choregraphe log.
I have tried to call the robot qimessaging.js library from computer but it throws an error:
SyntaxError: The URI is malformed. qimessaging.js:12
The html is there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="http://nao:nao#192.168.1.238/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/video.js"></script>
</head>
<body>
<canvas width = "320px" height = "240px"></canvas>
<p id="log">log</p>
</body>
</html>
Is there a way to call the qimessaging.js without errors to test the web in my computer?
Instead of console.log() you can use alert().
Also you can connect with your PC browser with this link robot_ip/apps/your_app_name/index.html', but your index.html must be in sub folder named html.
You can also test from your computer if you import the script from the robot directly:
<script src="http://12.34.56.78/libs/qi/2/qi.js"></script>
Then when you open a session, add the robot url as a third argument of the QiSession:
QiSession( onSuccess, onError, "12.34.56.78:80" );
Then your browser will connect to your remote robot.
I followed angular2 tutorial https://angular.io/docs/ts/latest/tutorial/.
I didnt want it run under node.js lite-server, but under django.
I managed to finish it and its working BUT: everytime I import any angular module eg. in index.html:
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
or in main.ts:
import {AppComponent} from './app.component'
or everywhere, javascript application is trying to load some js resource like static/dist/js/main file which doesnt exist of course, because the compiled file is named main.js not main.
When I add the extensions '.js' like:
System.import('static/dist/js/main.js')
.then(null, console.error.bind(console));
or
import {AppComponent} from './app.component.js'
It suddenly works, but ts to js compiler (npm run tsc) is throwing error (even throught its compiling) and my IDE is underlining imports as errors.
This is my full index.html:
{% verbatim %}
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="static/node_modules/systemjs/dist/system.src.js"></script>
<script src="static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="static/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="static/node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
{% endverbatim %}
I checked this Angular2 Typescript app throws 404 on components when js extension not specified but it didnt helped me.
Does anyone have an idea, please?
Assuming you have configured tsc to output your code to the 'static/dist/js' folder you should be able to configure Systemjs like this:
<script>
System.defaultJSExtensions = true;
System.config({
baseURL: "./static/dist/js"
});
System.import("main")
</script>
HTML and JS (non-minified versions)
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- <ember> -->
<script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/lib/ember.js/ember.min.js"></script>
<!-- </ember> -->
<!-- <app> -->
<script type="text/javascript" src="assets/js/templates.min.js"></script>
<script type="text/javascript" src="assets/js/app.min.js"></script>
<!-- </app> -->
</body>
</html>
app.min.js
window.App = Ember.Application.create();
templates.min.js (the templates are compiled using gulp-ember-templates)
Ember.TEMPLATES["index"] = Ember.Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
return "";
},"useData":true});
Description
When opening the page in a browser, the following error occurs:
Uncaught TypeError: template.buildRenderNodes is not a function
I'm using the latest version of both Ember and jQuery. When searching for this error I found people having this issue whilst upgrading to Ember 1.13, but I'm using Ember 2.0.0 and didn't call any deprecated method on purpose, actually I'm only using my generated templates (which are empty, because I didn't put any content in yet; see above) and Ember.Application.create().
I also found out that Ember works when including ember-template-compiler.js and keeping the templates uncompiled inside the HTML (using the Handlebars-script-tags).
Question
Is it a bug in Ember or am I missing something? It seems like it should work.
You are using a version of Ember that is using the new Handlebars compatible templating engine HTMLBars. To make sure your templates compile using this new syntax you will need to add the isHTMLBars: true option into the Gulp task for gulp-ember-templates, more formation can be found in the README.
I am making a clock in javascript. The code below is just the start. It should produce an orange rectangle only.
I am using the raphael library for the vector graphics.
However, when i try and view this in a web browser, in the inspect element i get a message saying that raphael is undefined.
I have stored my clock.html and clock.js file in a folder that contains only raphael-min.js
I have the html code as follows
<!DOCTYPE HTML>
<html>
<head>
<script src="Clock.js" type="text/javascript"> </script>
<script src=“raphael-min.js" type="text/javascript"> </script>
</head>
<body>
</body>
</html>
and the java code as follows
window .onload= function (){
var paper = new Raphael( 0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({ fill: "orange"});
/* Comment - Add your code here*/
};`
If someone could please tell me what I am doing wrong, that would be fantastic. In plain english please. I started learning html and javascript last week.
Many thanks
Always add the scripts your code uses before you add your code.
Like this:
<!DOCTYPE HTML>
<html>
<head>
<script src=“raphael-min.js"></script>
<script src="Clock.js"></script>
</head>
<body>
</body>
</html>
In the question, Clock.js appears first. That's probably why you are getting the Raphael undefined error.
I removed type="text/javascript". You'll find that in older JS books and tutorials but it is unnecessary.