JSFiddle - React, Tailwind, and code Playground

by jtodd

HTML

<button id="fullscreen-button">Full Screen</button><br />
<button id="smallscreen-button">Small Screen</button>

JavaScript

var $fullscreenButton = $("#fullscreen-button");
var $smallscreenButton = $("#smallscreen-button");

// Bring the page into full-screen mode - Works!
function requestFullScreen(element) {
    console.log("Requesting full screen mode");
    
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

// Exit fullscreen - Doesn't work!
function exitFullScreen(element) {
    console.log("Requesting small screen mode");
    var requestMethod = element.exitFullscreen || element.mozCancelFullScreen || element.webkitExitFullscreen || element.msExitFullscreen;
    if (requestMethod) {
        requestMethod();
    } else {
        console.log("Oops. Request method false.");
    }
}

$fullscreenButton.on("click", function () {
    var elem = document.body;

    // Make the body go full screen.
    requestFullScreen(elem);
});

$smallscreenButton.on("click", function () {
    var elem = document.body;

    // Exit full screen.
    exitFullScreen(elem);
});