|
Not sure if this helps, noticed div had no var to represent the object before append, I like using css instead of the element attributes width and height.
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.style.display = block;
canvas.style.width = 512;
canvas.style.height = 480;
canvas.id="gameCanvas";
var div = document.getElementById("slide-panel");
div.appendChild(canvas);
|
|
|
|
|
jkirkerx wrote: I like using css instead of the element attributes width and height.
jkirkerx wrote: canvas.style.width = 512;
canvas.style.height = 480;
Setting the width and height of a canvas control via CSS has negative impacts associated with it. You need to set height and width via the element attributes.
I agree however that in situations outside of the canvas element you would want to set these via CSS.
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
In my beginning, I used the width and height elements, but switched over to pure css later on in the years.
I know in HTML emails, I set both. I'll have to investigate the negative impacts because now I'm curious about it.
|
|
|
|
|
I think if you check the safari docs on canvas it even mentions there that you have to set the height and width via attributes.
when I wrote the jQuery plugin for http://dooscrib.com/[^] I had issues with coordinates not working if the height and width were set via CSS vs attribute.
since the canvas control came out of the camps of Apple I would trust their docs most. 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Canvas must be a HTML 5 element, sorry if I sound dumb about it. I'm still using VS2010 because I don't own a licensed copy of Windows 7 for my VS 2012.
|
|
|
|
|
it is an HTML5 element.
jkirkerx wrote: sorry if I sound dumb about it
not dumb about it. I am just saving the frustration of having to learn about the pitfalls of doing the CSS route. I spent hours debugging my plugin trying to get the CSS route to work till I came across the apple docs for safari that clearly said to use the attributes.
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Cheers for the input, still working on this, just lacking free time at all this week!
Anyway while debugging I tried throwing in the style, it didn't like style.display=block it decided not to draw the canvas!
Simon Lee Shugar (Software Developer)
www.simonshugar.co.uk
"You can be a king or a street sweeper, but everybody dances with the grim reaper" - Robert Alton Harris
|
|
|
|
|
Just as an idea, try setting the focus after the slide out animation has finished, rather than right when the slide element is clicked. If you are using the animate function in jQuery, I believe there is a "complete" function you can pass in that will execute once the animation is complete.
|
|
|
|
|
I've had a go, doing some experiment over the weekend I found it was actually the key EvenListeners not firing. My website's a little mashed togeather due to time constraints so I figured I was going to take a step back and see what javascript / Jquery is running and what I can cut back.
Simon Lee Shugar (Software Developer)
www.simonshugar.co.uk
"You can be a king or a street sweeper, but everybody dances with the grim reaper" - Robert Alton Harris
|
|
|
|
|
0
I am trying to achive a ause functionality in javascript.
I am making an asynchronous AJAX call and trying to achive synhronous functionality of AJAX. I want to pause the javascript until i receive the AJAX response for the asyn call of AJAX. Due to some reason i am not using the AJAX synchronous call which will solve my problem.
Once i make a call i use the following two functions to pause the JS
function pause2(numberMillis) {
var dialogScript = "window.setTimeout(" +
" function () { document.write(' '); window.close(); }, "
+ numberMillis + ");";
var result = window.showModalDialog('javascript.document.writeln(' +
'"' + dialogScript + '<' + '/script>")');
}
function pause3()
{
do
{
if(lmsCommitTimeOut<9000){
lmsCommitTimeOut=lmsCommitTimeOut+1000;
pause2(1000);
}
else
{
//alert("TimeOut");
lmsCommitStatus="false";
return;
}
}while(readStateAchived=="false")
}
I call the pause3(); function which internally calls the pause2(1000) for every 1sec until i get the ajax response back, which i check with the help of a js variable "readStateAchived".
This is working well in IE6, but in IE7 it is poping up the modal window and not getting closed, I have to close it manually.
Can anyone help me with this?
Thank you.
|
|
|
|
|
Hello,
Tyr using jquery blockUI (v2.31) plugin instead. Before your AJAX call just use
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });. More help can be obtained from here[^].
Regards,
Prasad P. Khandekar
Knowledge exists, man only discovers it.
|
|
|
|
|
0
I am trying to achive a ause functionality in javascript.
I am making an asynchronous AJAX call and trying to achive synhronous functionality of AJAX. I want to pause the javascript until i receive the AJAX response for the asyn call of AJAX. Due to some reason i am not using the AJAX synchronous call which will solve my problem.
Once i make a call i use the following two functions to pause the JS
function pause2(numberMillis) {
var dialogScript = "window.setTimeout(" +
" function () { document.write(' '); window.close(); }, "
+ numberMillis + ");";
var result = window.showModalDialog('javascript.document.writeln(' +
'"<script>' + dialogScript + '<' + '/script>")');
}
function pause3()
{
do
{
if(lmsCommitTimeOut<9000){
lmsCommitTimeOut=lmsCommitTimeOut+1000;
pause2(1000);
}
else
{
//alert("TimeOut");
lmsCommitStatus="false";
return;
}
}while(readStateAchived=="false")
}
I call the pause3(); function which internally calls the pause2(1000) for every 1sec until i get the ajax response back, which i check with the help of a js variable "readStateAchived".
This is working well in IE6, but in IE7 it is poping up the modal window and not getting closed, I have to close it manually.
Can anyone help me with this?
Thank you.
|
|
|
|
|
Hi , i Need TO customize the 'recordtext:{0}-{1}of {2}' in Jqgrid Using Jquery
I need Like this 1-10 of 29 (Users) ,
1-10 of 29 (Administrators) ,
1-10 of 29 (Emails)
In My project I am using Around 10 Jqgrids , i want to change the text inside the brackets for each single grid.
I need Urgent Solution .
The record text Format is in Language File of jqgrid(grid-en.js) and format like this 'recordtext:{0}-{1}of {2}'
|
|
|
|
|
|
hi,
I have looked all over and can't find something that suits my needs... so here goes...
I am creating a snooker game in HTML 5 canvas and JavaScript and have now came to the part of resolving the ball to ball collisions.
So far I have this, which is great, it detects the cue ball hitting another ball:
function isColliding(ball){
var distance = Math.sqrt(((this.posX - ball.posX)*(this.posX - ball.posX)) + ((this.posY - ball.posY) * (this.posY - ball.posY)));
if (distance < this.radius + ball.radius){
var collisionPointX = ((this.posX * ball.radius) + (ball.posX * this.radius)) / (this.radius + ball.radius);
var collisionPointY = ((this.posY * ball.radius) + (ball.posY * this.radius)) / (this.radius + ball.radius);
ball.speed = this.speed;
this.directionX = Math.cos(?);
this.directionY = Math.sin(?);
ball.directionX = Math.cos(?);
ball.directionY = Math.sin(?);
}
}
However I need to know how do I work out the Math.cos and Math.sin for the balls to move in a direction that is expected (using elastic collision), when they collide?
Thanks for help in advance..
Steve
|
|
|
|
|
I think you should have a look at the three top articles in the search below:
http://www.codeproject.com/search.aspx?q=snooker&x=0&y=0&sbo=kw[^]
In any case you should use vector calculus to calculate the angles as well as the elsatic collition. The Angles would be dependent on the incoming vector and the deviation should be from this line of reference. I know that the code is written in C# but I think you should get the understanding of the physics.
|
|
|
|
|
There are physics engines already implemented in JS
Physics Engine comparison
"It's true that hard work never killed anyone. But I figure, why take the chance." - Ronald Reagan
That's what machines are for.
Got a problem?
Sleep on it.
|
|
|
|
|
Did not know that.
|
|
|
|
|
Thanks
|
|
|
|
|
I m using the below code.But my page is taking much time to render.I m APS.net developer .Please suggest me solution.
function GetRecord() {
$.ajax({
type: "POST",
url: "abc.aspx/GetData",
data: "{NextPreviousYear:'" + parseInt($("#hdnNextPervious").val()) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccessCall,
error: OnErrorCall
})
}
function OnSuccessCall(response) {
$j(document).ready(function () {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var tblcalendar = xml.find("Report");
$('.tbl_calendar').html('');
$.each(tblcalendar, function (index) {
var row = "<tr>";
row += "<th>" + $(this).find("Month").text() + "</th>";
row += "<td class=" + $(this).find("D1").text() + "> </td>";
row += "<td class=" + $(this).find("D2").text() + "> </td>";
row += "<td class=" + $(this).find("D3").text() + "> </td>";
row += "<td class=" + $(this).find("D4").text() + "> </td>";
row += "<td class=" + $(this).find("D5").text() + "> </td>";
row += "<td class=" + $(this).find("D6").text() + "> </td>";
row += "<td class=" + $(this).find("D7").text() + "> </td>";
row += "<td class=" + $(this).find("D8").text() + "> </td>";
row += "<td class=" + $(this).find("D9").text() + "> </td>";
row += "<td class=" + $(this).find("D10").text() + "> </td>";
row += "<td class=" + $(this).find("D11").text() + "> </td>";
row += "<td class=" + $(this).find("D12").text() + "> </td>";
row += "<td class=" + $(this).find("D13").text() + "> </td>";
row += "<td class=" + $(this).find("D14").text() + "> </td>";
row += "<td class=" + $(this).find("D15").text() + "> </td>";
row += "<td class=" + $(this).find("D16").text() + "> </td>";
row += "<td class=" + $(this).find("D17").text() + "> </td>";
row += "<td class=" + $(this).find("D18").text() + "> </td>";
row += "<td class=" + $(this).find("D19").text() + "> </td>";
row += "<td class=" + $(this).find("D20").text() + "> </td>";
row += "<td class=" + $(this).find("D21").text() + "> </td>";
row += "<td class=" + $(this).find("D22").text() + "> </td>";
row += "<td class=" + $(this).find("D23").text() + "> </td>";
row += "<td class=" + $(this).find("D24").text() + "> </td>";
row += "<td class=" + $(this).find("D25").text() + "> </td>";
row += "<td class=" + $(this).find("D26").text() + "> </td>";
row += "<td class=" + $(this).find("D27").text() + "> </td>";
row += "<td class=" + $(this).find("D28").text() + "> </td>";
row += "<td class=" + $(this).find("D29").text() + "> </td>";
row += "<td class=" + $(this).find("D30").text() + "> </td>";
row += "<td class=" + $(this).find("D31").text() + "> </td>";
row += "</tr>";
$(".tbl_calendar").append(row);
});
});
}
function OnErrorCall(response) {
alert(response.status + " " + response.statusText);
}
Raj
ASP.net Developer
|
|
|
|
|
Haven't you spotted the spelling mistake?
hdnNextPervious *Previous*
"It's true that hard work never killed anyone. But I figure, why take the chance." - Ronald Reagan
That's what machines are for.
Got a problem?
Sleep on it.
|
|
|
|
|
I just spent another 5 minutes looking for it, and just caught it.
nice job dusty!
[edit]
Oh, I copied the mistake into my code sample, even worse!, oh well
|
|
|
|
|
I’m trying to get my website to show images one after the other using java script I got from www.javascriptkit.com/howto/show2.shtml and have followed there example as closely as I can but with no luck.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Acrele - Home</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="CSS1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var image1=new Image()
image1.src="16.jpg"
var image2=new Image()
image2.src="employee-training.jpg"
var image3=new Image()
image3.src="Real_Estate_Investment_Education.jpg"
var image4=new Image()
image4.src="Unti2tled.jpg"
var image5=new Image()
image5.src="Untitled.jpg"
var image6=new Image()
image6.src="zclassroom.jpg"
</script>
</head>
2. Added the html code were I want the image to show:
<div id="left-feature-colum">
<div id="slider-bg">
<div id="slider">
<img src="16.jpg" id="slide" width="600px" height="300px">
</div>
</div>
</div>
3. Edited there javascript accordingly to the number of images I’m using:
<div id="left-feature-colum">
<div id="slider-bg">
<div id="slider">
<img src="16.jpg" id="slide" width="600px" height="300px">
<script>
var step=1;
var img = document.getElementById('slide');
img.src = "image" + step + ".src";
console.log(img.src);
if (step < 6) step++;
else step = 1;
setTimeout(slideit, 3500);
</script>
</div>
</div>
</div>
This isn’t working, it only load the first image “16.jpg” only…Help
|
|
|
|
|
You have removed the code from inside the "slideit" function, so now there is no way for it to repeat and the setTimeout(slideit, 3500) is trying to call a function that doesn't exist.
|
|
|
|
|
There are a lot of bad slideshow scripts out there, I rewrote one that was a CMS plugin for word press which had many errors in it, and made no sense to me. It might be too advanced for you, and requires JQuery, but is simplistic in design.
[Display Advertising Filmstrip^]
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
