JavaScript

29-Mar-13 2:54

So on my site I've got a panel that slides out using Jquery, in that panel / div I've put a HTML5 game, the game works fine as a stand alone html document but I wanted to add it as a little surprise into a slide panel, however for the life of me I cannot keep the focus on canvas.

I've tried setting the tab index in the css to 1.

Here's the code I'm using.

JavaScript

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
canvas.id="gameCanvas";
div = document.getElementById("slide-panel");
div.appendChild(canvas);

JavaScript

$(document).ready(function(){
 
$(".btn-slide").click(function(){
document.getElementById('gameCanvas').focus()
});

});

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

Jasmine250129-Mar-13 6:55

Jasmine2501

29-Mar-13 6:55

Try the JQuery focus(), it seems to work a little better. Fires the focus event...

$('#gameCanvas').focus();

Simon Lee Shugar3-Apr-13 12:51

3-Apr-13 12:51

Thanks I'm using .focus instead now, actually think its due to where I'm loading the script and how the Eventlistnerers are loaded, unfortunately lacked a lot of free time this week to experiment!

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

jkirkerx30-Mar-13 18:57

jkirkerx

30-Mar-13 18:57

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.

// Create the canvas
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);

Dennis E White2-Apr-13 5:57

Dennis E White

2-Apr-13 5:57

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

jkirkerx2-Apr-13 6:28

jkirkerx

2-Apr-13 6:28

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.

Dennis E White2-Apr-13 6:35

Dennis E White

2-Apr-13 6:35

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. Smile | :)

as if the facebook, twitter and message boards weren't enough - blogged

jkirkerx2-Apr-13 6:38

jkirkerx

2-Apr-13 6:38

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.

Dennis E White2-Apr-13 6:42

Dennis E White

2-Apr-13 6:42

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

Simon Lee Shugar3-Apr-13 12:50

3-Apr-13 12:50

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

Thou mewling ill-breeding pignut!

AspDotNetDev7-Apr-13 13:10

AspDotNetDev

7-Apr-13 13:10

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.

Simon Lee Shugar7-Apr-13 21:34

AJAX Javascript ShowModalDialogBox in IE 7 and above not working

7-Apr-13 21:34

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

unniyadan28-Mar-13 20:53

unniyadan

28-Mar-13 20:53

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.

Re: AJAX Javascript ShowModalDialogBox in IE 7 and above not working

Prasad Khandekar11-Apr-13 3:44

Prasad Khandekar

11-Apr-13 3:44

Hello,

Tyr using jquery blockUI (v2.31) plugin instead. Before your AJAX call just use

JavaScript

$.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.

unniyadan28-Mar-13 20:52

unniyadan

28-Mar-13 20:52

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.

Jquery JqGrid

Member 962382927-Mar-13 2:30

Member 9623829

27-Mar-13 2:30

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}'

Re: Jquery JqGrid

Jasmine250127-Mar-13 7:48

Jasmine2501

27-Mar-13 7:48

You need to add the navigation bar, and read up on "paging" that's what it's called.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager[^]

Ball to Ball collision handling

SRJ9226-Mar-13 14:19

SRJ92

26-Mar-13 14:19

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:

JavaScript

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){
//balls have collided now work out where they collided
					
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

Kenneth Haugland26-Mar-13 15:29

Kenneth Haugland

26-Mar-13 15:29

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.

dusty_dex26-Mar-13 21:00

dusty_dex

26-Mar-13 21:00

There are physics engines already implemented in JS

Physics Engine comparison

Smile | :)

"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.

Kenneth Haugland26-Mar-13 22:01

Kenneth Haugland

26-Mar-13 22:01

Did not know that. Smile | :)