How to Hide Header and Sidebar using some Hot key

Question

I have an aspx Page which contain header, sidebar and main content. I would like to know how to hide Header and Sidebar using some hot key Like (F2 Key) and also main content should be auto adjust when I hide Header and side bar.

Please check my below markup and advise how to do this:

<body runat="server" id="body">
    <form id="form1" runat="server">
        <nav class="navbar fixed-top" id="navbar">
            <div class="navbar-brand">
                <button type="button" class="navbar-toggler" id="collapse-button" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="logo">
                    <h3><a href="<%= ResolveUrl("~/") %>" target="_top">KH MIS Dashboard</a></h3>
                    <h4><a style="color:dodgerblue" id="dashid" href="<%= ResolveUrl("~/") %>" target="_bottom"></a></h4>
                </div>
            </div>

            <div class="navbar-nav flex-row nav-header">
                <a class="nav-item nav-link d-none d-md-block"></a>
                <a class="nav-item nav-link d-none d-md-block"><%= Session["UserName"] %></a>
                <a class="nav-item nav-link d-none d-md-block" href="<%= DemoUtils.TryUrl %>"></a>
                <a class="nav-item nav-link d-none d-md-block" href=FrmLogout.aspx>Logout</a>
                <a class="nav-item nav-link" href="javascript:void(0);" id="settingsButton"><span class="icon icon-settings"></span></a>
            </div>
        </nav>
        <div class="main">

            <demo:SideBar runat="server"></demo:SideBar>
            <section id="submenubar" class="d-none d-lg-block" runat="server">
                <dx:BootstrapMenu runat="server" ID="subMenu" Orientation="Vertical" ClientIDMode="Static" SyncSelectionMode="None" EnableClientSideAPI="true">
                    <ItemTemplate>
                        <a href="#<%# Container.Item.Name%>" class="nav-link" id="">
                            <span><%# Container.Item.Text %></span>
                            <%# GetBadgeMarkup((BootstrapMenuItem)Container.Item) %>
                        </a>
                    </ItemTemplate>
                </dx:BootstrapMenu>
            </section>

            <section id="content">
                <dx:BootstrapCallbackPanel ID="MainCallbackPanel" ClientInstanceName="callbackPanel" runat="server" OnCallback="MainCallbackPanel_Callback" Width="100%" Height="100%"   class="theme-dx-office-white">
                    <ContentCollection>
                        <dx:ContentControl runat="server"></dx:ContentControl>
                    </ContentCollection>
                    <ClientSideEvents EndCallback="OnEndCallback"/>
                </dx:BootstrapCallbackPanel>
            </section>

            <section id="settingsbar">
                <h5>Color Themes</h5>
                <dx:BootstrapMenu runat="server" ID="themesMenu" ClientIDMode="Static" AllowSelectItem="true">
                    <ClientSideEvents ItemClick="dxbsDemo.onThemeMenuClick" />
                </dx:BootstrapMenu>
            </section>
            
        </div>
    </form>
</body>

https://stackoverflow.com/questions/424407/handling-key-press-events-f1-f12-using-javascript-and-jquery-cross-browser — react_or_angluar, Dec 21 '20 at 07:54

score 0 · Answer 1 · answered Dec 21 '20 at 08:36

you could create an event associated with the character code at the keys F1-F12 and invoke a function.


//F9 - F12 example 

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  switch (event.which) {
   case 120:
      setMessage("You just pressed F9!");
      break;
    case 121:
      setMessage("You just pressed F10!");
      break;
    case 122:
      setMessage("You just pressed F11!");
      break;
    case 123:
      setMessage("You just pressed F12!");
      break;
  }
}

function setMessage(msg) {
  document.querySelector('.demo').innerHTML = msg;
}

The above code is just for Event Handling.I would like to know how to hide Header and Side bar using the above code given by you. — Packing, Dec 21 '20 at 08:45

How to Hide Header and Sidebar using some Hot key

1 Answers1