Issues with position: fixed; in CSS(again)

[voltangle]

Hello again. I've seen last update of joystick that added support for position: absolute; and position: fixed; CSS attributes. I downloaded the latest version, extracted joy.js to my HTML folder, and... nothing. Still doesn't work. If you need, here is the repo (site is in HTML folder): https://github.com/GGorAA/GLaDOS.

How to fix this issue?

[bobboteck]

Hi @GGorAA I have see your code, but I don't understand the problem. You use the JoyStick here:

<div id="headJoy" class="head-joy" style="width:200px; height:200px; margin-bottom:20px;"></div>

and here:

<div id="bodyJoy" class="body-joy" style="width:200px; height:200px; margin-bottom:20px;"></div>

but this is a standard approach to use it, why you need to use FIXED position? And where you use FIXED position?

[voltangle]

And where you use FIXED position?

It is in CSS file. It is also in html folder.

why you need to use FIXED position?

For placing joysticks at the bottom of the screen.

[bobboteck]

Sorry @GGorAA, I have see the style.css too, but I can't see any reference to absolute or fixed position for the JoyStick. Can you link me a specific line of code?

[voltangle]

Sorry, forgot to say, I was moving entire div, with buttons on top

Also link to code:

https://github.com/GGorAA/GLaDOS/blob/master/html/style.css#L80

https://github.com/GGorAA/GLaDOS/blob/master/html/style.css#L102

I also forgot to push changes to GitHub, sorry for that)

[bobboteck]

Hi @GGorAA, now I understand your situation. As I wrote to you, JoyStick now supports Fixed or Absolute positioning via CSS, but this style must be applied directly to the DIV that contains JoyStick. In your case, the CSS positioning property is assigned to a DIV, but it is a parent of the DIV that contains the JoyStick, to function correctly in your case, you should also give a fixed positioning to the DIVs that have the IDs "bodyJoy" and "headJoy", that was the ID of DIV that contains the JoySticks in your project. I hope I was clear.

P.S. You have same picture of a project? It looks interesting.

[voltangle]

Thanks for the advice! I also realized that I need to move buttons and joystick independently, and apply bottom margin for buttons to place them above the joy, so they don't overlap each other. I tested this and it works fine! Later I will test the case when for parent div that contains joy and buttons, and div that contains joystick.

P.S. What picture? I don't understand your request

[bobboteck]

P.S. What picture? I don't understand your request

Picture, images of your project, I read that was a Raspberry PI, same mobile part, ecc... If you want I can add it in the Use case page of Wiki.

I can close the Issue now?

[voltangle]

Yes, you can close. And can we move our conversation to a messenger, Telegram for example?

Note: I am writing this project using "blind coding", I don't have any parts of GLaDOS. I have no Raspberry Pi, no servos, no motors, no LEDs and others. That means that I code "in theory", not on real hardware on which this project will run. So I can give you just a screenshot of the controller)

[bobboteck]

You can find me on telegram as @bobboteck