search

jeromeetienne / virtualjoystick.js

a virtual joystick library to emulate a joystick on touch screen in javascript
http://jeromeetienne.github.com/virtualjoystick.js/examples/basic.html
MIT License
419 stars 125 forks source link

joystick not limited to "control' element #24

Closed h3rb closed 10 years ago

h3rb commented 10 years ago

I have an application that has a canvas that is 600x600 pixels, and I want the joystick only to function within that.

div id="control" canvas... /div

id "control" is essentially the same as "container" in basic.html example, except it is set to 600px by 600px and contains the canvas. However, On the left outside of this div I have elements that are not inside the control div yet the joystick appears so I cannot click those elements (sliders, text boxes, radio controls)

Yes, I have set container : document.getElementById('control') Basically I need LimitStickActiveArea.html :)

h3rb commented 10 years ago

I tried wrapping the options I wanted to click in a div element and bringing it forward using zindex to no avail

jeromeetienne commented 10 years ago

See dual.html it contains a way to validate if a given NJ joystick position is valide or not

h3rb commented 10 years ago

I submitted a pull request, please review

h3rb commented 10 years ago

FYI dual.html shows me a blank page in Chrome

jeromeetienne commented 10 years ago

Try it on mobile On Jan 29, 2014 5:32 PM, "h3rb" notifications@github.com wrote:

FYI dual.html shows me a blank page in Chrome

Reply to this email directly or view it on GitHubhttps://github.com/jeromeetienne/virtualjoystick.js/issues/24#issuecomment-33601535 .

jeromeetienne commented 10 years ago

Or with touch event emulation in Chrome On Jan 29, 2014 5:40 PM, jerome.etienne@gmail.com wrote:

Try it on mobile On Jan 29, 2014 5:32 PM, "h3rb" notifications@github.com wrote:

FYI dual.html shows me a blank page in Chrome

Reply to this email directly or view it on GitHubhttps://github.com/jeromeetienne/virtualjoystick.js/issues/24#issuecomment-33601535 .

h3rb commented 10 years ago

Well, that's not really a viable option right now so I added the functionality I needed and created a pull request.

jeromeetienne commented 10 years ago

i dont understand why you cant use that

h3rb commented 10 years ago

I'm not sure why it comes up with a blank page and no errors either. I am not sure how to simulate touch environment, but in the end my additions, though they limited the values of x,y, did not solve the problem, what did solve the problem was removing the "relative" style option required for the container which is set by virtualkeyboard.js near line 14, after doing that (and turning off region checking features I added) things seem to work within the container only, which was desired.

jeromeetienne commented 10 years ago

well why not look harder. this feature is able to do exactly what you descibed in the first email

On Wed, Jan 29, 2014 at 8:35 PM, h3rb notifications@github.com wrote:

I'm not sure why it comes up with a blank page and no errors either. I am not sure how to simulate touch environment, but in the end my additions, though they limited the values of x,y, did not solve the problem, what did solve the problem was removing the "relative" style option required for the container which is set by virtualkeyboard.js near line 14, after doing that (and turning off region checking features I added) things seem to work within the container only, which was desired.

Reply to this email directly or view it on GitHubhttps://github.com/jeromeetienne/virtualjoystick.js/issues/24#issuecomment-33621195 .

h3rb commented 10 years ago

the issue is that it assigned it to be relative when i needed an absolute, perhaps a new feature could be changing the positioning of the resulting container, or leaving the css alone there and let the user set it in the style