Error with different css-positions

[morasp]

When working with a CSS position other than the default, the joystick can not be moved correctly.
I suspect, this is an issue with the calculation of the movement.
I suggest to calculate the movement based on the last and the current position.

[bobboteck]

Hi @morasp can you send me more detail of your problem?

[morasp]

If I position the Container with css

    position: fixed;
    bottom: 30px;
    left:0px;

the movement of the stick is restricted to sidewards movement (I have only tested vertical repositioning)
If I check the value of canvas.offsetTop is the same as without the positioning.
Tested on MacOS 10.15.5 and Safari

[bobboteck]

Hi @morasp, I think the problem is due to the absolute positioning that you used.
The JoyStick work on the position in the parent element, and if you force it the Stick can't move correctly.
For now I'm sorry, I can try to check if there is a way to make it work even like this, when I have closed the other issues and I will have time to work on it.

[samburdge]

Hi,
I had this same issue. It definitely makes sense to have the joystick at the bottom of the screen, but at the moment you can't position it where you want.
Apart from that the joystick is great!

[Tezcan98]

I discover that's trick. You should create a div before joystick. Also Thanks guy, after I publish my game I'll add you to credits. But I just started the game :D

[bobboteck]

I discover that's trick. You should create a div before joystick. Also Thanks guy, after I publish my game I'll add you to credits. But I just started the game :D

Yes if you use DIV and put the JoyStick into it work correctly.
I try to find a solution on @morasp question

[bobboteck]

Hi guys, I'm happy to declare this issue closed, now you can use FIXED or ABSOLUTE position in the CSS style.
See the example of implementation here: https://bobboteck.github.io/joy/joy.html
Have fun using the joystick!