I am having the following folder structure:
I am using the following p5js library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
I am trying to load my font using the following:
let myFont;
function preload() {
// var myFont = loadFont('Abel-Regular.ttf');
myFont = loadFont("fonts/NotoSerifArmenian-Thin.ttf");
}
However I get as error:
Font could not be loaded fonts/NotoSerifArmenian-Thin.ttf
cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js:11
Any suggestions what I am doing wrong?
I appreciate your replies!
Related
First of all, give thanks for reading my question and try to help me and apologize for my English.
I have the following problem...
I'm adding js file and css file dinamically, but sometimes appears an error because load first a static js file before that downlod both files added dinamically.
How can solve that problem?
Until download both files added dynamically, do not load the js file (mapfunctions.js)
My api js file, call a function where add dinamically js file and css file as you can see.
This is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
// this file add dinamically a js file and a css file
<script src="./js/api/api.js"></script>
// this file needs js file added dinamically, and if is not downloaded crash
<script src="./js/option2/mapfunctions.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
});
</script>
</body>
</html>
Error that shows sometimes is:
Error: ReferenceError: mapboxgl is not defined at Object.createMap
This is my api.js file:
let mapboxJsUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js';
let mapboxCssUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css';
(function(window, document) {
var includeJSFiles = function(url) {
var apiJs = document.getElementsByTagName("script")[0];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
var css = includeCss(mapboxCssUrl);
if (apiJs !== undefined) {
head.insertBefore(script, apiJs);
} else {
head.insertBefore(script, head.firstChild);
}
head.insertBefore(css, script);
};
var includeCss = function(url) {
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", url);
return css;
};
includeJSFiles(mapboxJsUrl);
}(window, document));
In this case, your safest bet may be to use the load event on the window object. According to MDN, load is only fired when all resources and dependencies have loaded so that may make it a better fit for your situation.
I'm not familiar with mapbox, however after a little research I found that the api your trying to use will create a mapboxgl object in your window context.
Seeing as customMap is not defined anywhere, I instead checked for the existence of mapboxgl on window to verify that the Mapbox API was dynamically loading into your sample. I made the following adjustments to your code to achieve dynamically loaded mapbox scripts:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
// this file add dinamically a js file and a css file
<script src="./js/api/api.js"></script>
// this file needs js file added dinamically, and if is not downloaded crash
<script src="./js/option2/mapfunctions.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
/* UPDATE
Add event listener to window object, and register handler on the load event
*/
window.addEventListener('load', function(e) {
customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
});
</script>
</body>
</html>
Also, in your api.js script, you should make the following adjustments to faciliate this:
(function(window, document) {
var includeJSFiles = function(url) {
//var apiJs = document.getElementsByTagName("script")[0];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
// UPDATE
// Keep this simple, and insert the script as head's first node
head.insertBefore(script, head.firstChild);
var css = includeCss(mapboxCssUrl);
head.insertBefore(css, script);
};
var includeCss = function(url) {
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", url);
return css;
};
includeJSFiles(mapboxJsUrl);
}(window, document));
Hope this helps you!
As title, I used a HTML import link in my site:
<link rel="import" href="http://XX.XX.XX.XX/">
<script type="text/javascript">
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('body');
</script>
The variance "link" returns a document in Chrome, but returns null in Safari and other browsers. I know HTML import function is only supported by Chrome so far, so I added the following code before import link to load Polymer's webcomponents.js:
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
but it still returns null in other browsers, can anybody tell me how to fix it?
It's because the <link> request is asynchonous.
Catch the HTMLImportsLoaded event, to parse the file only when it is loaded by the browser:
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://XX.XX.XX.XX/XX/warning.html">
<script type="text/javascript">
window.addEventListener( "HTMLImportsLoaded", function ()
{
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('body');
} )
</script>
I'm trying to get the Google Feed API to work by simply copy-pasting the example code from Google's tutorial here: https://developers.google.com/feed/v1/devguide
(!) It works fine in every browser except Chrome.
I created an HTML file with this code (from Google's "Hello World" tutorial):
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
But when I load the HTML file, I get this error in the Chrome console:
Uncaught ReferenceError: google is not defined
What am I missing here?
I have found the problem. https://disconnect.me/ was running on Chrome and stopped the script from working.
Trying to use a jQuery plugin and it is not working and this error
'$' is undefined
keeps popping up. I am very new to Javascript and jQuery so please be as simple as possible
<script type="text/javascript" src="wpscripts/jquery-1.4.1.min.js"></script>
<!--[if IE 6]>
<script src="thumb-images/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('#preview_inner div a');</script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width();
thumbs.click(function () {
preview_pos = preview_els.eq(thumbs.index(this)).position();
outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500);
arrow.stop().animate({ 'left': $(this).position().left }, 500);
});
arrow.css({ 'left': thumbs.eq(0).position().left }).show();
outer.animate({ 'scrollLeft': 0 }, 0);
$("#preview_inner").css('width', preview_els.length * image_width);
});
</script>
That usually means that you have to import jquery at the top like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Edit: Here is the link for the updated version. I believe that this page will always update to the latest version of jQuery whereas my above answer won't: HERE
Check your script source path. It's likely not loading in.
If it's at the root of a site use:
<script type="text/javascript" src="/wpscripts/jquery-1.4.1.min.js"></script>
I see you have also tagged ASP.NET, so If it's in a control or somewhere that can be different for each page load, then use the following to have .Net figure out the actual relative path.
<script type="text/javascript" src="<%= ResolveClientUrl("~/wpscripts/jquery-1.4.1.min.js") %>"></script>
I see you are using WordPress.
You often are not able to define links with a relative path.
try using the php function "get_theme_root();" to get the theme root and navigate from there
I want to use more Javascript files on one canvas, but I can't connect them. For example I want to write a Javascript file that contains all functions and an other Javascript file which is using them.
Show me a guide, how can I make this connection?
Thanks.
This is the first javascript file :
var canvas = null;
var ctx = null;
window.onload = function () {
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
line (100,100,300,300);
}
This is the secnond file:
function line (x1,y1,x2,y2) {
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
And this is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Tutorialok</title>
<script type="text/javascript" src="CanvasElement.js"></script>
<script type="text/javascript" src="line.js"></script>
<style>
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
Sorry your browser Does not support canvas element!
</canvas>
</body>
</html>
The first file cant find the second files function.
Use namespacing via Objects. I don't recommend a pattern where all functions exist in one file, but this is an idea you could use. You MUST load file1.js before file2.js can do anything.
// file1.js
window.namespace = window.namespace || {};
window.namespace.fns = {
foo: function () {}
};
// file2.js
window.namespace.fns.foo();
jsFile 1
var f1 = function(){};
var f2 = function(){}
jsFile2
var s1 = f1();
var s2 = f2();
use this on the html page
<script src="path/jsFile1.js"></script>
<script src="path/jsFile2.js"></script>
If you're expecting the function to hoist, I don't believe that would work between script files since each one is evaluated independently. Switch the script tags around so line is in scope when CanvasElement.js loads.
Otherwise, the global namespace is shared between the linked scripts.