javascript – Asp.Net MVC how can I make an own close and fullscreen button?-ThrowExceptions

Exception or error:

I’m very new to ASP.NET MVC and web development and I don’t know how to implement a fullscreen and an exit button

This is my exit button so far:

<body>
<div id="exit" class="exit">
    @Html.ActionLink("⠀x⠀", null, null, new { @class = "btnclose", id = "close", style = "color: black; font-size:large; font-weight:bold; background-color:red; border-color:#3f464c; border:solid; border-width: 2px" })
</div>
</body>
<script>
    function closewindow() {
        $("#close").click(function () {
            window.close();
        });
    };
</script>

and this is my fullscreen button

<body>
<div align="center">
            <input type="button" name="btnFullscreen" value="Go Fullscreen" style="font-size:xx-large; font-weight:bold; width:500px; height:300px; text-align:center; background-color:#e87a3a; border-color:#3f464c" onclick="goFullscreen()" />
</div>
<body>

<script>

function goFullscreen() {
        location.replace("/Gauge/GaugeView");
        var el = document.documentElement
            , rfs = // for newer Webkit and Firefox
                el.requestFullscreen
                || el.webkitRequestFullScreen
                || el.mozRequestFullScreen
                || el.msRequestFullscreen
            ;
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
            // for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

How to solve:

Hi I have reviewed you code you were almost there. But few problem remain on your code.

Here is the complete example for you.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <input type="submit" id="btnFullScreen" name="btnFullScreen" value="Full Screen" />
        <input type="submit" id="btnCloseScreen" name="btnCloseScreen" value="Close Full Screen" />
    </div>
    <script type="text/javascript">


    </script>

    <script type="text/javascript">

        //Btn Full Screen
        $("#btnFullScreen").click(function () {
            alert("Test");
            var el = document.documentElement,
                rfs = el.requestFullscreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                    || el.msRequestFullscreen
                ;

            rfs.call(el);
        });

        //Btn Close Screen
        $("#btnCloseScreen").click(function () {

            alert("Close Screen");
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        });
    </script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *