All buttons hide when I go to full screen

This topic has 2 replies, 2 voices, and was last updated 3 weeks, 6 days ago by abd3d.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

2024-08-22 at 8:34 pm #76924

Participant

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

Swiss army knief

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 4 weeks ago by abd3d.
This topic was modified 4 weeks ago by abd3d.

Attachments:

You must be logged in to view attached files.

2024-08-22 at 10:47 pm #76930

xeon

Customer

So…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.com

2024-08-22 at 11:55 pm #76931

abd3d

Participant

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