JQuery :: Add A Class To Canvas?
Aug 16, 2010
I am working with the new canvas element. I have simplified my request.
Can I add a class to the canvas JS? Currently the fill colour is set with 'context.fillStyle="red";' I would love have this in a class as I want to change the colour of the fill with jQuery.
<!DOCTYPE html><html><head><meta charset=utf-8"><title>Canvas</title></head><body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
[Code]....
View 2 Replies
ADVERTISEMENT
Jul 12, 2011
I want to delete some lines on the canvas that i have created in HTML5 (with the <canvas> tag). I know one solution and that is using clearRect() (give this function the HEIGHT and WIDTH of the canvas and you clears the whole canvas.).But i don't want to clear the whole canvas, i only want to delete a few lines made by the function lineTo().
View 1 Replies
View Related
Mar 16, 2009
I have a menu in which is applied typeface script. Typeface 0.11 version doesn't support hover on links. There is an experimental version but doesn't work very well for me, so i tried to implement hover by myself.
Problem is: hover works pretty well changing canvas context property fillColor and then calling fill(), but the stroke on hovered voice remains on another color. Difficult to explain, so i put some test code online: TEST CODE As you can see, passing with mouse on the menu voices triggers the hover and the element change, but remains bordered in red.
[Code]...
View 5 Replies
View Related
Jun 3, 2010
My code: [URL]... When I click on Upraviť in class edit I need add some HTML code to begin and to end of class entry how to I can select class entry in the same class post on which I clicked?
View 1 Replies
View Related
Apr 30, 2009
A remotely shared white board, using regular JavaScript,jQuery, the canvas element and PHP.I (or someone else) can get this thing working.The new 8:25 a.m. (US CST) version in http:[url].... should work -- though I still have not seen it work, perhaps.
View 2 Replies
View Related
Oct 25, 2011
I have the following code which displays a list of 6 images. Im using a reflective and magnifine plugin which seem to be working to an extent. The last three images in the list work perfectly, however the first three dont magnify, and that is becuase I have the img tags wrapped around the a tags as they are links. How to modify the magnify code so it magnifies imgs that have the a tag around it.
[Code]...
View 3 Replies
View Related
Dec 27, 2010
This is a question concerning the SVG plug in,Here is the code
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>[code].....
1.SVG isn't drawing the circle
2. var svg is undefined keeps popping up.
View 2 Replies
View Related
May 20, 2011
I am having problems getting the webshims plugin canvas polyfill to work. I get the following error in IE9 using IE7 mode: SCRIPT438: Object doesn't support property or method 'fillRect' problem.html, line 21 character 7 when I try to run this code:
[Code]...
View 1 Replies
View Related
May 5, 2011
I have a huge blob of code but the main part I am focusing on is this
$('.billboard_click').click(function () {
//this remove class
$(".billboard_click").removeClass("billboard_click");
});
1. Execute a click event when the div with the class 'billboard_click' is clicked
2. Once clicked, remove the class from that very div to avoid another click from happening
3. Execute a series of events such as animations, etc
4. add the class back to the clicker div
The code does not seem to work as expected but I am wondering if I am having issues elsewhere at this point and wonder if this actually is known to work
View 7 Replies
View Related
Jul 2, 2009
I am new to this discussion but hope you would post reply for my query and encourage me to keep in touch with this discussion. Well here is my problem. I have made an edit in place form in which we can add and remove the elements. I have used jquery.jeditable.mini.js and jquery.duplicate-remove.js plugins for edit in place and add and remove action. I have live() function to access the dynamically ganerated elements like this. $(".addressDiv span").live("mouseover", function(){
clickable function here...
[Code]...
View 1 Replies
View Related
Dec 29, 2011
I am adding a CSS class to a DIV as follows:$div.addClass("Hover");But I would like the class to be added only if the DIV does not have a class named "Disabled".
View 2 Replies
View Related
Dec 22, 2010
I have this filter in a results table that also reflect in a ui datepicker day styling (ex:available unavailable) . Everything fine till i change month or year in datepicker . Maybe i have to use live() or livequery() but can see the way .This is the code:
$("#filterSelect").change(function(){
var filtro=$("#filterSelect").val();
$("#filter-box2").val(filtro);
[code]....
View 1 Replies
View Related
Mar 9, 2011
I'm trying to figure out which selector is faster (assuming that the class 'foo' only appears on input tags)...
$('.foo');
or
$('input.foo');
From what I've seen online, it seems that people recommend $('input.foo'), but in some limited testing it appears that $('.foo') is much faster in both FF and Chrome. In IE, both methods seem to produce similar results. Here is a fiddle with a simple example...
[URL]
Have browsers started implementing native ways to find all elements with a given class name? Would that explain why $('.foo') seems to be faster?
View 1 Replies
View Related
Nov 25, 2010
<input type="text" class="class1">
<input type="text" class="class3">
<input type="text" class="class2">
<input type="text" class="class2 class1">
<input type="text" class="class1 class3">
<input type="text" class="class1">
Given the above, how would I select those that HAVE class1, but NOT class2, don't care about class3
So what I want are the items on lines 1,5 & 6 How could the below be modified to achieve what I want, or do I need something completely different?
View 1 Replies
View Related
Dec 24, 2011
[URL] The above webpage lists the selector .class.class without an example. I can't find this usage in jQuery document either. I made the following example, but it doesn't work. Could anybody let me know who to use the .class.class selector?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
[code]....
View 3 Replies
View Related
Jun 22, 2006
I am trying to catch keypresses in my canvas tag, but it appears that
that is not valid.
I may try to just create a hidden input box that will allow me to catch
keypresses.
I am trying to write a very simple asteroids game for a presentation on
Ajax in July, to show that javascript can do more than it was able to a
couple of years ago.
View 3 Replies
View Related
Feb 23, 2010
Why doesn�t the following code work in IE, I use excanvas.js as told in other articles? excanvas is in the same dir as the html-file.
Code:
<html>
<head>
<title></title>[code].....
View 1 Replies
View Related
Nov 3, 2011
Why won't my canvas graphics get rendered?
[Code]...
View 3 Replies
View Related
Feb 13, 2011
I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems:(1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart.(2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it.
View 2 Replies
View Related
Jan 1, 2011
I have make a javascript program that uses HTML canvas and I can't get it to work in Internet Explorer. I tried using excanvas and jqcanvas but had trouble getting them to work.
View 5 Replies
View Related
Apr 7, 2009
Before the canvas tag you had to write a script to make a gradient for html element backgrounds. Now you can use canvas and it's as easy as ... well messing with canvas. I have this script. At one point I had the gradient img objects resizing so the gradient would not get skewed. it was simple. just set the height% at the opposite ratio of the canvas width/height. But I went to make some changes and the next thing i knew that no longer worked. I don't remember how I did it!! I'm going to have to start over if I can't figure it out. Here's the script. Canvas only.
I haven't adapted with excanvas for IE yet, but that's coming when I can figure out how I had the thing working right. It's a css issue. I had thought I put the img objects in divs that were sized and positioned and then set the images to width 100% height= 100%*((canvas.width-canvas.height)/canvas.width) So in my example, the canvas was 100 x 30 and the factor is 7 so it would resize the image 700% and the height would grow by the relative amount to the setting I had it. I'll try to figure it out, but there's the script working somewhat. I want to figure out a way to resize the img objects when the user resizes the page, but I want the img to always maintain aspect ratio. [URL]
<script>
/*ORIGINAL SCRIPT FOUND AT [URL]*/
window.onload = function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 50);
g.addColorStop(0, 'rgba(255, 255, 0, 0.5)');
g.addColorStop(0.5, '#0ff');
g.addColorStop(1, '#00f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
var data = canvas.toDataURL();
document.getElementById('i').src = data;
document.getElementById('EIMG').src = data;
var canvas2 = document.getElementById('c2');
var ctx2 = canvas2.getContext('2d');
var g2 = ctx2.createLinearGradient(0, 0, 100, 50);
g2.addColorStop(0, 'rgba(255, 0, 255, 0.5)');
g2.addColorStop(0.5, '#0ff');
g2.addColorStop(1, '#00f');
ctx2.fillStyle = g2;
ctx2.fillRect(0, 0, 100, 50);
var data2 = canvas2.toDataURL();
document.getElementById('i2').src = data2;
document.getElementById('DIMG').src = data2; .....
View 3 Replies
View Related
Oct 21, 2009
I'm having a problem with the <CANVAS> element in JavaScript. here's what i'm trying to do: I need 3 different canvas elements for writing a signature to. they must all 3 be visible at the same time
My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas.
[Code]...
View 2 Replies
View Related
Feb 25, 2010
Why doesn't the following code work:
<script type='text/javascript'>
var canvas = document.createElement('canvas');
canvas.width = 1400;
canvas.height = 700;
var context = canvas.getContext('2d');
context.strokeRect(10, 10, 50, 50);
context.stroke();
</script>
View 4 Replies
View Related
Mar 21, 2010
I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari.
[Code]...
View 2 Replies
View Related
May 6, 2010
I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames.
Here is the code I have so far:
var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0; .....
As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms.
However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move. I read somewhere that setInterval can be broken by one-time functions, but I'm not sure. If you'd like to see what it's currently doing in a browser, I've hosted it here [URL]. Once I've got this animating properly I can continue my project, but I've hit a roadblock.
View 2 Replies
View Related
Jun 19, 2011
Here's a snippet:
canvases[i] = document.createElement('canvas');
canvases[i].style.width = '3px';
canvases[i].style.height = '100%';
canvases[i].getContext("2D");
canvases[i].fillRect(1,0,1,table_height);
I'm trying to dynamically create a canvas element. Later in the script it gets attached to the DOM, and this works fine if the last two lines are missing. I end up with a canvas element that is 3px wide and 100% of the containing div tall. However, the last two lines make it crash, with the error report 'canvases[i].fillRect is not a function'.
If I change the last two lines to:
var drawing = canvases[i].getContext("2D");
drawing.fillRect(1,0,1,table_height);
It says 'drawing is null'. Something seems to be going wrong with the getContext bit, because setting the height and width work fine. It behaves the same if I append the canvas element to the DOM before trying to do the drawing as well. This is in FF4.0.1 with a xhtml1-strict.dtd doctype and valid html.
View 7 Replies
View Related
