ASP.Net MVC Make navigation bar disappear when in full screen mode

Question

I am not sure if this is even possible but it would be a pretty cool thing to have for a dashboard I am creating using Kendo UI and ASP.Net MVC.

So essentially what I would like to do is when a user hits "F11" to go into full screen mode, I would like my navigation bar to collapse, and then open back up if the user exits full screen mode.

Navbar

I am simply including the nav bar so everyone can see how it is currently set up. It is pretty much the default generated for MVC.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <!--My nav bar items-->
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

I am quite the beginner at this so I am not sure where to even start. If it makes it any easier, I really only need to do this on a single page. I have a dashboard screen where I would like to set it on a TV and leave in full screen mode.

Any pointers or help would be really appreciated.

Thank you!

score 2 · Accepted Answer · answered Jul 26 '19 at 04:04

There is a :fullscreen pseudo class in CSS that could detect fullscreen and apply specific CSS. You can read more about it here.

Unfortunately, pressing F11 doesn't trigger that class because according to this, there are "2 types of fullscreen";

Triggered via F11
Triggered via a Script

The fullscreen triggered via a Script is the one that the CSS can detect. So here's what I tried that worked;

First, I added an ID to my navbar so I could reference it on my css. An alternative to this is using classes.

<div id="myNavbar" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                ...
            </div>
            <div class="navbar-collapse collapse">
                ...
            </div>
        </div>
</div>

Second, I added this so Site.css, this could be found in Your Project > Content > Site.css. In the css, we are reducing the navbar height to 0px whenever the page is in fullscreen.

        #myNavbar {
            transition: 0.4s;
        }

        html:fullscreen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-moz-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-webkit-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

Third I added a button (you could put this anywhere on the page) that would programmatically trigger the fullscreen.

<button id="full-screen-toggle" class="btn btn-lg btn-info">Go Fullscreen</button>

Then I added the script to be called whenever we click the button. Add this to the page where you placed a button.

@section scripts
{
    <script>
        document.getElementById('full-screen-toggle').addEventListener('click', function () {
            var doc = document.documentElement;

            if (doc.requestFullscreen) {
                doc.requestFullscreen();
            } else if (doc.webkitRequestFullscreen) {
                doc.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (doc.mozRequestFullScreen) {
                doc.mozRequestFullScreen();
            }

            return false;
        }, false);
    </script>    
}

After clicking the fullscreen button, the navbar should quickly hide itself with a slide animation.

ASP.Net MVC Make navigation bar disappear when in full screen mode

1 Answers1