I am trying to use Instafeed.js, but my code will not work. I tried the download button at the InstafeedJS website, but it only shows code. I copied that code into a file, saved it as instafeed.min.js, and linked it to my webpage. I followed the steps at the Instafeed website, but it didn't work.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'CLIENT-ID',
accessToken: 'ACCESS-TOKEN',
template: '<li><div><img src="{{image}}" /> <h3>{{caption}}</h3></div></li>',
resolution: 'standard_resolution'
});
feed.run();
</script>
</head>
<body>
<div id="instafeed"></div>
</body>
</html>
Keep in mind that I do have the correct clientID and accessToken, but I didn't put them in the code above so nobody else can use them.
Try putting the <script></script> tags in the <body>, after the <div id="instafeed"></div>. The JS may be running before the DOM is loaded.
Related
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
The errors appear at the console after i open this code on live server on vscode, im learning Vue.js and the code itself opens the file but i dont know how to fix those errors.
Ive reasearched somethings about the errors but couldnt fix them.`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vuejs"></script>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>teste</p>
<script>
const vm = new Vue();
console.log(vm)
</script>
</body>
</html>`
This question already has answers here:
JavaScript not working on external file
(4 answers)
Closed 5 years ago.
i have 2 files....one html and one js....
html code:
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="external.js"></script>
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
</body>
</html>
js code:
some functions here performed on click operation.....
function onClickOperation ()
{
///here codes..
}
problem is that the functions are not being called...when i put the same js code in the html file directly, it works....what do i have to do to load those functions from separate js file?
external.js should have the code called after DOM has finished loading like so
document.addEventListener('DOMContentLoaded',function(){
// code here
});
or it should be included inside the body tag below the DOM elements it should interact with
Try wrapping the script in the body and just before the </body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
<script type="text/javascript" src="external.js"></script>
</body>
</html>
i try to learn angular js.
i try a simple code in the html like this
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="bootstrap.min.css" >
</head>
<body>
<input type="text" ng-model="name">
<div>hello{(name)}</div>
<!-- jQuery -->
<script src="https://cdnjs.com/libraries/angular.js/"></script>
</body>
</html>
the result when i run it on web browser is an error. it didnt work
the error on console is like this
Uncaught ReferenceError: System is not defined on line 2
how come i get error like this?
You cannot include all the https://cdnjs.com/libraries/angular.js/ page, you need to choose which script you want to include, something like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Also, it is {{name}} (two curly braces), not {(name)}
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
</head>
<body>
<input type="text" ng-model="name">
<div>hello {{name}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</body>
</html>
This is pointing to the AngularJS CDN page:
<script src="https://cdnjs.com/libraries/angular.js/"></script>
You should select a version. For example Minified AngularJS version 1.5.8:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Notice that you should exclude the https.
Also check that to print out a variable in AngularJS you should use {{ name }} instead of {(name)}.
There are at least two points that need to be highlighted here.
Your import. The other answers are describing perfectly why it does not work. Fix it.
Angular itself. Angular works with applications and controllers (for its simplest part). What you need to do is to make a file which will contain your controller. For example, create a file called myapp.js and import it into your web page:
<script src="path/to/myapp.js"></script>
Then, once you initialized your application (var myApp = angular.module('myApp',[]); will do the trick perfectly) and controller (check the AngularJS documentation about it), you'll be able to intialize your data with your scope:
$scope.name = 'John';
Call your application in your HTML page:
<html ng-app="myApp">
And you'll be able to see the magic working there:
hello {{ name }} // and not {( name )}
Your web browser should actually display:
hello John
I'm trying to start a webpage with knockou.js
I'm trying to follow the instruction on the web and create very simple page, but for some reason i don't get the binding... maybe i miss a definiation or something like that? can anybody help with that?
That my page:
<html class="rtl">
<head>
<title>changeup - קבל שער</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<script type='text/javascript' src='bower_components/knockout.js/knockout.js'></script>
</head>
<body cz-shortcut-listen="true">
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
</body>
</html>
but the only think i get on my browser is: "Today's message is:"
Read through the documentation under the subject Activating Knockout, you have to apply the bindings as well, add:
ko.applyBindings(viewModel);
after viewModel.myMessage("Hello, world!");