We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

All buttons hide when I go to full screen

Home Forums General Questions All buttons hide when I go to full screen

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #76924
    abd3d
    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 3 months ago by abd3d.
    • This topic was modified 3 months ago by abd3d.
    Attachments:
    You must be logged in to view attached files.
    #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

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.