Tag: web application

How To Include Full Screen Mode In The Web Application

Full screen mode is useful for video games, editing, and other purpose. So most of these types of applications use Fullscreen API  so the user can switch between full screen mode and the standard default mode.

Also we can program specifically to instruct the browser to switch to full screen.

To apply full screen mode we will use requestFullscreen() method

To set fullscreen document.documentElement.requestFullscreen()

To exit firescreen document.exitFullscreen()

The example Code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #change-display-mode {
            padding: 10px 20px;
            border: 2px solid #333;
            background-color: transparent;
            color: #333;
            font-size: 16px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
        }

        #change-display-mode:hover {
            background-color: #333;
            color: #fff;
        }


    </style>
</head>

<body>
    <div>
        <button id="change-display-mode">To Fullscreen Mode</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var fullscreenButton = document.getElementById('change-display-mode');

            function toggleFullscreen() {
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen();
                    fullscreenButton.textContent = "Exit Fullscreen";
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                        fullscreenButton.textContent = "Go to  Fullscreen Mode";
                    }
                }
            }

            fullscreenButton.addEventListener('click', function () {
                toggleFullscreen();
            });
        });
    </script>
</body>

</html>

You can test this here