Full Screen Webpage HTML5 API

Posted on Updated on

This code will make your website go in to a full screen view, with the click of a button.

Or, if you prefer, you can press CTL + ` instead.

I modified the original code from sitepointstatic.com with the keyboard shortcut, but it’s still basically the same.

          <span id="fullscreen">Go Full Screen</span>
JS Script:

        // full screen script         
        // http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
        var e = document.getElementById("fullscreen"); // button for activation.
        // var b = document.getElementById("body");  // Does not allow scrolling- good for individual elements, like pictures or video.
        var b = document.documentElement; // Does allow scrolling
        e.onclick = function() {
            if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
                RunPrefixMethod(document, "CancelFullScreen");
            }
            else {
                RunPrefixMethod(b, "RequestFullScreen");
            }
        }
        
        var pfx = ["webkit", "moz", "ms", "o", ""];
        function RunPrefixMethod(obj, method) {
            var p = 0, m, t;
            while (p < pfx.length && !obj[m]) {
                m = method;
                if (pfx[p] == "") {
                    m = m.substr(0,1).toLowerCase() + m.substr(1);
                }
                m = pfx[p] + m;
                t = typeof obj[m];
                if (t != "undefined") {
                    pfx = [pfx[p]];
                    return (t == "function" ? obj[m]() : obj[m]);
                }
                p++;
            } 
        }
        
        // keydown event handler
        document.addEventListener('keydown', function(e) {
          if (e.ctrlKey && e.keyCode == 192) { // ` AND CTL
        RunPrefixMethod(b, "RequestFullScreen");
          }
        }, false);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s