I've been hitting wall after wall while following along with almost all of the basic snap.svg tutorials out there. While running their code through jsfiddle or codepen everything works, but when I try the same through my own local editor I've had little luck.
My code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
</head>
<body>
<svg id="svg" class="svg"></svg>
</body>
</html>
JavaScript
var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
fill: "#addedd",
strokeWidth: 10,
stroke: "#beeeef"
});
CSS
body {
display: block;
width: 200px;
height: 200px;
margin: 50px auto;
}
.svg {
width: 100%;
height: 100%;
}
The main issue I was always presented was a Reference Error for the line:
var surface = Snap("#svg");
I resolved this by including a callback and wrapping the block in a function:
function main(){
var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
fill: "#addedd",
strokeWidth: 10,
stroke: "#beeeef"
});
};
$(document).ready(main);
I feel like these tutorials are skipping something? I'm sure there is a better resolution than what I came up with? What do you think?
I just want to start learning Snap!
Snap has no dependency on jquery.
The problem may be that you are running the script and calling this line.
var surface = Snap("#svg");
Before the svg markup
<svg id="svg" class="svg"></svg>
is loaded into the DOM. So it can't find the element to reference. The issue isn't related to Snap at all, just normal HTML/SVG and JS loading and ordering.
What isn't clear from the original code, is when you are loading your own js code in. You could try putting it after the svg markup, but generally it's preferred to make sure the document is ready first with...
$(document).ready( ... )
As you have already found :).
As you have mentioned, Snap code can only be executed once, jQuery is loaded.
$(document).ready(function(){
var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
fill: "#addedd",
strokeWidth: 10,
stroke: "#beeeef"
});
});
The order of loading js files is important. Since snap has a dependency on jQuery, you can't execute it until jQuery is ready.
More than Snap or any javaScript library, it is important for you to understand the basic of JS first. Smaller files will be loaded faster than a large file even though, they are requested afterwards.
In your case, even before jQuery got downloaded, main function of your js got executed and you got an error. This is why, $(document).ready is always the preferred way of starting your code with jQuery.
EDIT:
As #Ian has pointed out, snap has no dependency on jQuery. The actual issue was of the wrong ordering of the js files. The correct order should be as the following,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
</head>
<body>
<svg id="svg" class="svg"></svg>
<!-- custom code should be loaded after the svg markup -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Related
I am trying to make a local html file so that I can embed Cryptowat.ch's embed API into a desktop application through a webview.
I have found an NPM package that demonstrates how to use the API, and it seems really easy. It even comes with a sample JSFiddle.
Before digging into any of the customization I simply copied the JSFiddle to a local file:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#chart-container {
width: 550px;
height: 186px;
}
</style>
<div id="chart-container"></div>
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>
<script type="text/javascript">
function loadChart() {
var chart = new cryptowatch.Embed('gdax', 'btcusd', {
timePeriod: '30m',
width: 550,
height: 186
});
chart.mount('#chart-container');
}
window.onload = loadChart;
</script>
</body>
</html>
It works fine in the JSFiddle, but it doesnt work in ANY browser I've had installed. On Chrome, I see the chart, but no data and the page becomes unresponsive. On Firefox I only see a black square. On Internet Explorer, it's just a blank page.
Is there something obvious I'm missing?
There simply seemed to be a momentary blip in the API.
I was experiencing the exact same issues as you described, using your above code.
Without modifying the code at all, it now appears to be working correctly.
I need some helping loading my JavaScript game on Chrome.
I wanted to code the traditional Snake game in JavaScript using a framework called p5.js, and I started with the canvas. The problem happens when I open the JavaScript file in Chrome (which I linked in my index.html file with a script tag).
Instead of the grey canvas appearing, per my JavaScript code, the code itself shows up on the Chrome page. Here's my code, have a look:
HTML
Snake | JS
<body>
<script src="F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src="F:\Code\JS\Snake\sketch.js" type="text/javascript"></script>
</body>
</html>
And here's the JS:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
}
Specs:
Chrome, Windows 10 Anniversary Edition.
P.S. Javascript is enabled, I have checked.
Try these things
1) Test your js code on www.codepen.io/pen/, some javascript doesn't run properly when local. (F:\Code)
2) Try to put your script at the end of the body tag. Attention that the scripts are loaded in the order they appear. Consider the dependencies.
Assuming the path F:\Code\JS\p5\p5-zip\ to your files are correct and you are not working in a zipped folder.
You should have a file like index.html, wich will be the root of your website.
Here's a minimal example, including your scripts:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src = "F:\Code\JS\Snake\sketch.js" type = "text/javascript"></script>
</body>
</html>
Your javascript files should be placed in the bottom of the page,
just before the closing body tag
You must reference your js file in a good order for preventing some dependency issues
If you are able to browse your index.html file, right click on the page -> "show source code" and try to click on your js files reference, if the path is not correct you will have a 404 not found error.
I'm trying to generate a form for use with my game, I have to say, JavaScript is a whole new world from what I'm used to, and not being able to just create text-fields inside of the canvas is pretty lame, (Or atleast I haven't found a way to... that works with mobile devices)
Here's my code:
var loginForm;
var formUserInput;
var formSubmit;
loginForm = document.createElement("form");
loginForm.setAttribute('method', "post");
loginForm.setAttribute('action', 'doSomething()');
formUserInput = document.createElement("input");
formUserInput.setAttribute('type', "text");
formUserInput.setAttribute('name', "username");
formSubmit = document.createElement("input");
formSubmit.setAttribute('type', "submit");
formSubmit.value = "Submit";
loginForm.appendChild(formUserInput);
loginForm.appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(loginForm);
Here's my HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game"></div>
</body>
</html>
When debugging the page I don't get any javascript errors, but the form never appears, and it also is not appended to the source. I also tried using $("body").append(loginForm); which is jQuery, but it also didn't work.
This is the generated HTML:
<html><head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game" style="overflow: hidden;"><canvas width="800" height="600" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></div>
</body></html>
The JavaScript is located inside of the "js/CanvasManager.js" script.
Since your JavaScript code is in an external file that is referred to via a script element in the head part, the code gets executed when the browser is still processing the head part and hasn’t even started reading the body element. Thus, there is no body element in the DOM, so the append fails. In the browser console log, you should see an error message like the following:
TypeError: document.getElementsByTagName(...)[0] is undefined
There are several ways to fix this. One way is to move the element
<script src="js/CanvasManager.js"></script>
at the end of the body, right before the end tag </body>.
A cleaner way is to wrap the code in a function and assign it to be executed once the page has loaded:
window.onload = function() {
// your current code goes here
};
This way the logic won’t depend on the placement of the script element.
I have seen a lot of frameworks and extensions recently and all for a lot of different things. It is hard for me to do things using just raw JavaScript or raw jQuery. I want to use these JS extensions/frameworks but the problem is that I don't know how to link them to my HTML document.
For Example: <script src="some link of fw/ext" type="text/javascript"></script> I put this in the <head> of my HTML and then write my code in a different file named "script.js" (made using notepad) but the code doesn't seem to work.
I know this is a problem because I don't link it properly.
I want to work with fabric.js on a project related to HTML5 canvas. I think I need to link both, my code and the framework in some way but I'm not sure as to how should I do it.
My HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javscript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
</head>
<body>
<canvas id="draw" width="250px" height="250px">This if browser doesn't support HTML5
</canvas>
</body>
</html>
My JS Code:
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 100;
canvas.freeDrawingBrush.color = "#ff0000";
Should work somewhat like this : http://jsfiddle.net/MartinThoma/B525t/5/
You need to load fabric.js first at the header and then you need to load your js file order matters.
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script>
<script type='text/javascript' src='yourjsfile.js'></script
In case you are not clear on how to add elements to the canvas. Then here is one snippet which could help you.
Also wrap your code inside onload() function so that when the script loads, the #draw element is available
window.onload = function() {
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "#ff0000";
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// you need to add the object to canvas
canvas.add(rect);
}
I'm having a problem with my 'curtainX' cycle animation in jquery. The first animation seems to zoom out in the top center, instead of doing the animation it should. I can't seem to find the problem and now I don't know where to start. I tried checking the different options for the animations and can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">img{position:absolute;}</style>
<script src = "jquery.js"></script>
<script src = "jquery-ui.js"></script>
<script src = "jquery-cycle.js"></script>
<script src = "text/javascript">
function start(){
$("#blank").cycle({
fx: 'curtainX',
sync: false,
delay: -4000
});
}
</script>
</head>
<body>
<div id = "blank" onclick = "start()">
<img src = "img/blank.gif" style = "z-index:1"/>
<img src = "img/1c.gif"/>
</div>
</body>
</html>
You can view a demo at http://vrbj.webs.com/flipTest.html
It seems to be a problem related to the absence of a width and a height.
I've rewritten the code here
Removing width and height causes your problem.
You can solve changing:
img{position:absolute;}
to
img{position:absolute; width: 59px; height: 74px;}
Consider also the way you have written your code, taking a loo at what i've written.
Your code's right but the way is written is less "plugin's compliant" than in the fiddle.
Functions in the tag are called when they are needed. Try moving your start function within the tag and put that within an $(document).ready( your function ) call