Home › Forums › General Questions › All buttons hide when I go to full screen
Tagged: Fullscreen
- This topic has 2 replies, 2 voices, and was last updated 2 months, 2 weeks ago by abd3d.
-
AuthorPosts
-
2024-08-22 at 8:34 pm #76924abd3dParticipant
I am trying to recreate similar Swiss army knife project, doing so I stumbled upon on hurdler.
When I toggle between full screen and normal screen all button that are created using HTML is also toggling along with it,
If I enter in full screen all button hide and when I exit from full screen It will visible again,
I am using ” Set style display” to hide buttons while loading and visible after loading in puzzle.
I have checked this issue in my swiss army knife project and its also there,
I dont know what is the problem,edit_1 :- This is also happening in official swiss army knife example
This is my HTML code for this project.
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bed Table</title> <link rel="icon" href="media/ar.png" type="image/png"> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } .column { display: flex; flex-direction: column; align-items: center; z-index: 2; } #left-column { padding-left: 20px; } #right-column { padding-right: 20px; } .image-button { width: 50px; height: 50px; margin: 10px 0; border: none; background-color: transparent; cursor: pointer; background-size: contain; background-position: center; background-repeat: no-repeat; } .image-button img { width: 100%; height: 100%; display: block; } iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; } @media (max-width: 768px) { #left-column { padding-left: 10px; } #right-column { padding-right: 10px; } } #object_button { background-image: url('media/show_obj.svg'); } #explode_button { background-image: url('media/explode.svg'); } #ar_button { background-image: url('media/ar.svg'); } #w_1_button { background-image: url('media/w_1.png'); } #w_2_button { background-image: url('media/w_2.png'); } #w_3_button { background-image: url('media/w_3.png'); } #w_4_button { background-image: url('media/w_4.png'); } </style> </head> <body> <div class="column" id="left-column" style="display: none;"> <button class="image-button" id="object_button"></button> <button class="image-button" id="explode_button"></button> <button class="image-button" id="ar_button"></button> </div> <div class="column" id="right-column" style="display: none;"> <button class="image-button" id="w_1_button"></button> <button class="image-button" id="w_2_button"></button> <button class="image-button" id="w_3_button"></button> <button class="image-button" id="w_4_button"></button> </div> <iframe src="Bed_table.html" allowfullscreen sandbox="allow-scripts allow-same-origin"></iframe> </body> </html>
- This topic was modified 2 months, 2 weeks ago by abd3d.
- This topic was modified 2 months, 2 weeks ago by abd3d.
Attachments:
You must be logged in to view attached files.2024-08-22 at 10:47 pm #76930xeonCustomerSo…if you take a look at the Swiss army knife demo provided by Soft8Soft you will find this is not a problem with your version..but an inherent issue with the demo itself.
The demo is designed to be responsive so the Full screen button would have been better to have been disabled as there is no need for it. If you use the browsers full screen button it works fine.
Do you really need the full screen button…because if you do, there are a number of changes to the html/css to make it work.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2024-08-22 at 11:55 pm #76931abd3dParticipantCurrently in this project , I think its not needed, But I have made one Home visualization project using godot. I want to make similar project after this practice, so I would like to know what changes I have to do.
Thank you for your response. -
AuthorPosts
- You must be logged in to reply to this topic.