CODEWITHSUNDEEP
javascripthtmlgoogle-chromewebkitrequestfullscreen
Koby Douek
Koby Douek

Reputation: 16675

webkitRequestFullscreen works, but pops right back

I'm trying to implement a button that will make the page go full screen.

When clicking the button, the page goes full screen but only for a split second and then it pops right back to the way it was. There are no errors in the browser console (via Chrome).

Here's my JS code:

function enterFullscreen() {
   var elem = document.getElementById('parent');
   if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
   }
   else {
        if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        }
        else {
            elem.requestFullscreen();
        }
   }
}

Here's my HTML:

<div id="parent">
    <div id="child">
        <button onclick="enterFullscreen()">Toggle fullscreen</button>
    </div>
</div>

Upvotes: 0

Views: 269

Answers (1)

Koby Douek
Koby Douek

Reputation: 16675

Found my problem... I needed to add return false; in the button click event:

<button onclick="enterFullscreen(); return false;">Toggle fullscreen</button>

Upvotes: 0

Related Questions