Enabling full screen viewing of HTML elements in Internet Explorer 11

Sometimes, you might need to show something on your ASP.NET web application in the full screen, free from all other windows, toolbars, and so on. Microsoft's IE11 browser (available since 2013) is the first version to support programmatic full screen (fullscreen, full-screen) access. This includes the ability to toggle the fullscreen mode on and off, and listen to events related to this.

The fullscreen specification is part of the HTML5 set of standards, but it is currently a living standard. Thus, not all browsers support it currently in the same way, but things should get better once the standard is finished. (For a good overview of the current state of things, refer to Can I Use).

Here are examples that work with IE11 and jQuery:

$("#myFullScreenToggleElement").click(function () {

    // find the element and show it fullscreen
    var element = $("#elementYouWantToShowFullscreen").get(0);
    if (element.msRequestFullscreen) {
        // console.log("Going fullscreen now");

        document.addEventListener("MSFullscreenChange", function () {
            // console.log("Fullscreen state change event");
            if (document.msFullscreenElement != null) {
                // the user went into fullscreen mode, do something here
            }
            else {
                // the user exited the fullscreen mode, do something here
            }
        });

        element.msRequestFullscreen();
    }
});

Above, the selector "#elementYouWantToShowFullscreen" refers to the element you want to display in fullscreen mode. This can be an image, div element containing other elements, or, say, a video. Not all elements can be shown in fullscreen, and also note that you might need to explicitly set the background color. The default color is black.

Finally, note that since the fullscreen mode is somewhat sensitive security-wise, you can only enable it from JavaScript code that is part of event handlers for UI event, such as the click event. Otherwise, the API calls will just silently fail.