1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Closing fullscreen for getElementById(id)

Discussion in 'JavaScript' started by weFF, Feb 9, 2022.

  1. #1
    Hello, im new in js so please dont be hard on me.

    So issue is that script goes fullscreen as expected but cannot figure out how to trigger "ESC" or same button to close fullscreen.

    .holds-the-iframe just adds loader before iframe is loaded.

    <div class="holds-the-iframe"><iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/">
    </iframe></div>
    HTML:

    <button onclick="makeFullscreen('game');">[ ]</button>
    HTML:
    function makeFullscreen(id){ 
            var el = document.getElementById(id); 
            el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
      }
    Code (JavaScript):
     
    Solved! View solution.
    weFF, Feb 9, 2022 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    hdewantara, Feb 10, 2022 IP
  3. SEOPearl

    SEOPearl Well-Known Member

    Messages:
    127
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Please try "CLASS" instead of "ID" and you may surely get output!

    Because you can utilise it A single ID selector can be attached to an element, however a class selector can have many ID selectors.
     
    SEOPearl, Feb 10, 2022 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    Actually, I think there's a way to implement this without javascript. Have a look at following page:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
           
            <title>title</title>
            <style>
        #iframe-holder{
            display: inline-block;/*always wraps iframe content*/
            position: relative;/*as reference to absolutely positioned label*/
            background-color: red;
        }
    
        #cb{/*hide traditional checkbox, use label for user interaction*/
            display: none;
        }
       
        #cb+label{/*label to mimic button*/
            position: absolute;/*relative to iframe holder*/
            right: 1em;
            bottom: 1em;
            display: inline-block;
            width: 1.4em;
            height: 1.2em;
            background-color: lightgray;
            border-radius: 0.3em;
            text-align: center;
            line-height: 1.1em;
            border: 1px solid gray;
        }
        #cb:checked+label{/*is no longer relative to iframe holder*/
            position: fixed;
            z-index: 1;/*pushed forward*/
        }
       
        #cb+label:before{
            content: '[]';
        }
        #cb:checked+label:before{/*label in 'fullscreen' mode*/
            content: '][';
        }
       
        #cb~iframe{
            display: block;/*avoid spacing*/
            border: 0;
        }
        #cb:checked~iframe{/*iframe in 'fullscreen' mode*/
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
            </style>
        </head>
        <body>
            <h1>h1</h1>
               
            <p>Autem exercitationem itaque necessitatibus repudiandae dolores. Unde at molestias qui ut velit libero praesentium velit.
            Ea eaque eum dolor alias vel incidunt.</p>
    
            <div id="iframe-holder">
                <input id="cb" type="checkbox">
                <label for="cb"></label>
                <iframe allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
                    sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups"
                    src="https://randomurl.com/"></iframe>
            </div>
           
            <p>Fuga quisquam ea doloremque asperiores expedita. Quam provident sint id. Officia ea aut dignissimos qui sint.
            Voluptas et aut quia dolores illum.</p>
        </body>
    </html>
    
    HTML:
     
    hdewantara, Feb 11, 2022 IP
  5. weFF

    weFF Greenhorn

    Messages:
    22
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #5

    Very nice, will do some testing for sure.


    Meanwhite js have issue. I can toggle fullscreen of and off, but as soon as i click on iframe or actually trying to lauch game or video in fullscreen mode "ESC" stops triggering "exitFullScreen".



    const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
    const normalStyle = "width:1000px;height:700px;border:0;"
    
    function enterFullScreen(el) {
        el.style = fullscreenStyle;
    }
    
    function exitFullScreen(el) {
        el.style = normalStyle;
    }
    
    function toggleFullScreen() {
       var el = document.getElementById("game");
       if (el.style.position === "fixed") {
         exitFullScreen(el);
       } else {
         enterFullScreen(el);
       }
    }
    
    document.addEventListener("keydown", function(e) {
       if (e.key === "Escape") {
         var el = document.getElementById("game");
         exitFullScreen(el);
       } 
    }, false);
    PHP:
     
    weFF, Feb 11, 2022 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    The code in your last post looks okay...
    perhaps you could share with me an URL link to a demo / sample page?
     
    hdewantara, Feb 11, 2022 IP
  7. weFF

    weFF Greenhorn

    Messages:
    22
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #7
    It feels like there is something going on with
    Event.stopPropagation()
    Code (JavaScript):
    but its a bit too complicated for me to understand.

    Sure, this "https://submit.lv/2022/01/25/super-onion-boy/" is version you came up. Its almost prefect but i cannot figure out how to prevent iOS Safari from scrolling page at fullscreen. And this "https://submit.lv/2022/01/30/solitaire-13-viena/" is JS version.

    There might be some wp errors but since page was created just for testing purposes...
     
    weFF, Feb 12, 2022 IP
  8. weFF

    weFF Greenhorn

    Messages:
    22
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #8
    Can you help me place fullscreen toggle button at top of screen while iframe is fullscreen? Somehow it's appears in right direction on normal screen and keeps at same place when fullscreen.
    https://jsfiddle.net/8qpwvo7y/1/
     
    weFF, Feb 14, 2022 IP
  9. #9
    Untested but the simplest I guess is by modifying both enterFullScreen() and exitFullScreen() to include style change of .button1, for example:
    function enterFullScreen(el) {
      el.style = fullscreenStyle;
      document.querySelector('.button1').style = 'position:fixed;top:0;left:0;';
    }
    Code (JavaScript):
    For exitFullScreen():
    function exitFullScreen(el) {
      el.style = normalStyle;
      document.querySelector('.button1').style = 'position:absolute;top:auto;left:auto;';
    }
    Code (JavaScript):
     
    hdewantara, Feb 14, 2022 IP
  10. weFF

    weFF Greenhorn

    Messages:
    22
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #10
    Almost perfect. Few adjustmets was needed but thanks for your time and help.
     
    weFF, Feb 14, 2022 IP
  11. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #11
    :)
     
    hdewantara, Feb 14, 2022 IP