It's been a while since I've done web programming and I'm trying to start again. However, I cannot seem to get JQuery to work.
In my javascript file I have this code:
$(document).ready(function() {
$('#canvas').mousedown(function(e){
alert("I am an alert box!");
});
});
However, nothing happens when I click the canvas.
I know everything is linked properly because at the top of my javascript file I have this:
function loader()
{
var canvas = $('#canvas')[0].getContext('2d');
canvas.fillStyle = "rgba(200, 0, 200, 0.5)";
canvas.fillRect(225, 105, 200, 200);
}
(In the HTML file I have <body onload="loader()">)
And that works fine and displays a pink box when I load the page.
Anyone know why this may be happening? Thanks.
Got it!
The problem was that I linked my javascript file before the jQuery file.
Basically, switched these two lines:
<script type="text/javascript" src="canvas.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Related
I have a js function that takes an html node and fades it from yellow to white. But it only works if before calling it from my js file I add text to body element via document document.writeln('Hi');. If I write text directly in my html file and don't call document.writeln then I don't see the fade effect after opening index.html.
<!DOCTYPE html>
<html>
<head>
<script src="program.js"></script>
</head>
<body style='width: 100%; height: 100%'>
Hi
</body>
</html>
JS file:
'use strict';
document.writeln('Hi'); // If we comment out this line we don't see the fade effect.
// Define a function that sets a DOM node's color
// to yellow and then fades it to white.
var fade = function (node) {
var color = 1;
var step = function () {
var hex = color.toString(16);
node.style.backgroundColor = '#FFFF' + hex + hex;
if(color < 15) {
color++;
setTimeout(step, 100);
}
}
setTimeout(step, 100);
};
fade(document.body);
EDIT:
Using window.onload for fade function also does not help.
I tried to use this one and it works without any errors:
document.addEventListener('DOMContentLoaded',function(){
fade(document.body);});
If the DOM is not loaded yet, you can't change it. So, this listener might help.
As described here, if you call Document.writeln() the browser calls Document.open() before, so there is an existing Document object. That might be the reason, why it worked, when you added this line before.
https://developer.mozilla.org/de/docs/Web/API/Document/write
You can also move the <script src="program.js"></script> to right before the </body> tag.
Is the function wrapped in a
$(document).ready(function()
{
//Function goes here
});
or a
window.onload = //function name here
if not, use either one & it should be working
EDIT
I've forgotten to say that you shouldn't forget to add jQuery before the external js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I don't understand one things with js. If I have my .js file and in HTML I have following code:
<head>
<script src="skrypt.js"></script>
</head>
<body>
Content
</body>
Does it mean that during first execution my skrypt.js will be performed ?
Because When I have in my skrypt.js code :
document.write("HelloWorld")
Output is "HelloWorld" but when I have in skrypt.js :
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 300, 300);
Page is blank and I have to use event :
<body onload="drawCanvas();">
</body>
Where drawCanvas() has the same code like in external .js file.
So why document.write is working while canvas is not ???
JavaScript files loaded in the head are processed before the DOM is ready. You'll need to wrap your function in window.onload, call it elsewhere after the page loads, or put the external file call in at the bottom of your page document, just before the closing body tag.
I'm following this tutorial to learn HTML5 game development using javascript and jQuery. However, I've already come across a problem. When I run the HTML page that my js file is referenced from, nothing loads, and is just a blank screen. Here is the code for both files. Note that I haven't gotten very far in the tutorial.
index.html
<HTML>
<head>
</head>
<body>
<p>HTML5 and jQuery Tests</p>
<script type ="text/javascript" src="test.js"></script>
</body>
</HTML>
test.js
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +"' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
function draw() {
canvas.fillStyle = "#000";
canvas.fillText("hello.", 50, 50);
}
Any help would be greatly appreciated! Also, am I allowed to ask questions about this code in this forum, on the same thread, or do I have to stat another?
Thanks!
~Carpetfizz
You don't have an update function to call. When the setInterval fires (which is ~32ms after the script loads), you're getting an error.
You need to add jQuery.
It's a library that was written to make working with HTML easier.
It needs to exist above where test.js does.
You can either download your own copy of it, or link to a copy elsewhere on the net - both will work fine.
$ is used by jQuery as a function to intelligently grab different kinds of items: HTML, JS, etc, and return JS objects with helpful functions for working with whatever you asked for.
Anyway, the update would still have caused an error, it was just second in line, behind the missing script.
I have written this code in JavaScript and works perfectly fine when I include it on my index.html page:
<canvas id="bannerCanvas" width="960" height="200">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("bannerCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(25,25);
context.lineTo(355,55);
context.lineTo(355,125);
context.lineTo(25,125);
context.moveTo(465,25);
context.fill();
};
</script>
...however when I place it in an external JavaScript file, it won't work! In the head of the index page, I have declared this:
<script type="text/javascript" src="JavaScript/functionality.js">
</script>
And I save this functionality.js file in the JavaScript directory, I've tried doing other JS functions in this file to check the index page and the JS are connected and they are...The answer is probably staring me in the face but for some reason I cannot see it!
Any help is much appreciated, thank you.
EDIT: I've been using Firebug and it is giving me no errors, when I use the code on the index page, I am seeing the shape I want yet when using the external JS file I am just seeing a big black rectangle.
the reason for this is that the script is being run before the canvas element is rendered.
To fix it, add this in your external file.
document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
// your code here.
}
or with jquery
$(function(){
// your code here.
});
Within functionality.js, try wrapping your code in
window.onload = function() {
// code here
}
so that it won't execute until after the page has loaded.
If it is in the head, you are loading it before the canvas element is rendered. Look at the JavaScript console and you will see a Null or undefined error.
Add the script tag in the same place it works with the inline code. JavaScript does not have to live in the head and some developers will recommend it should always be the last thing in the body.
Other solution is to run the script on document ready or window onload.
Dont put in the head, When you put the code in the head, it run the code when there is no canvas element in page yet.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Raphaeljs and Internet Explorer, problem when clicking an element
I'm trying to find a way to trigger an event when a mouse clicks on some text generated from Raphael JS. In Firefox, the click event works perfectly, in IE 7 and 8 (I haven't tested earlier versions) neither click nor mousedown work. Click works fine for other raphael objects, e.g. the rectangle in the example.
How can I trigger an event on the text given in the demonstration below:
<html>
<head>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script language="javascript">
function setupImage() {
var canvas = Raphael(graph, 200, 200);
var alpha = canvas.text(100, 10, "Two Words");
alpha.attr("font-size", "20px");
var beta = canvas.rect(50, 50, 50, 50);
beta.attr("fill", "#3333cc");
canvas.safari();
var textClickEvent = function(event) {
alert("text clicked");
};
var boxClickEvent = function(event) {
alert("box clicked");
};
$(alpha.node).click(textClickEvent);
$(beta.node).click(boxClickEvent);
}
$(window).load(setupImage);
</script>
</body>
</html>
My gut feeling is I may have to try manipulate the DOM to wrap the text in, e.g., an A element and bind on that instead. That doesn't seem like the cleanest solution so I'm asking here to see if anyone has an alternative approach.
Why not just use the raphael built in event coding like this:
alpha.node.onclick = textClickEvent;
beta.node.onclick = boxClickEvent;
or you could also do this:
alpha.click(textClickEvent);
beta.click(boxClickEvent);
The rest of your code is fine.
Some helpful links: Raphael events section and Raphael node section.