CODEWITHSUNDEEP
javascripthtmlwebkitfullscreen
TN.
TN.

Reputation: 19820

HTML fullscreen API on DIV

Is HTML fullscreen working on DIVs?

<!DOCTYPE html>
<html><head>
</head><body>
<div id="e">fullscreen</div>
<script>
    window.onload = function() {
        var elem = document.getElementById("e");
        if (elem.webkitRequestFullscreen)
        {
            elem.innerHTML += " has function";
            elem.webkitRequestFullscreen();
        }
    }
</script>
</body></html>

It outputs fullscreen has function on Chrome. However no fullscreen.

Upvotes: 2

Views: 499

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

It has to be triggered by a user action: http://jsfiddle.net/DerekL/cHuNr/show/

var div = document.querySelector("div"),
    btn = document.querySelector("button");
btn.addEventListener("click", function () {
    if (div.webkitRequestFullscreen) {
        div.innerHTML += " has function";
        div.webkitRequestFullscreen();
    }
});

Upvotes: 3

Related Questions