locked
Hide a div element from site master RRS feed

  • Question

  • User1769015664 posted

    In a content page, how do I hide a DIV (div id="Footer") that is in master.page?

        <div id="Footer" > 
            <p>This is my Footer to display at the bottom of the page</p>
        </div>

    This footer works fine if contents of a page fits within the screen. But, if the content is more and page is scrollable, then footer is displayed on top of the conetent and also scrolls up along with the content of hte page.

    I prefer to fix the page so the Footer is not scrolled up when page is scrolled up, if not possible then I would like to hide the Footer.

    Sunday, October 4, 2020 10:43 PM

Answers

  • User1535942433 posted

    Hi NJ2,

    Accroding to your description and codes,as far as I think,you could add wrapper outside the content and fixed the footer.

    Since you don't post your content to us,I created a demo.Just like this:

     <style>
            #Footer {
                ;
                bottom: 0;
                height: 25px;
                width: 100%;
                background: linear-gradient(90deg, #083b5f 10%, #1E5A8C 35%, #083b5f 80%);
                color: #eee;
                vertical-align: middle;
                text-align: center;
                margin: auto;
                margin-top: 10px;
                padding: 0px 0;
            }
             #contentWrapper {
                ;
                left: 10em;
                top: 5em;
                bottom: 5em;
                right: 0;
                overflow: auto;
            }
    
            #ContentPlaceHolder1 {
                ;
                width: 2000px;
                height: 2000px;
            }
        </style>
    
    <div>
                <div class="navbar navbar-inverse navbar-fixed-top"
                    style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                    <div class="container" style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                        <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>
                            <a class="navbar-brand" runat="server" href="~/">
                                <h1 style="display: inline; border: none; color: white;">
                                    <img alt="" src="images/HHA_Logo.png" /></h1>
                            </a>
                            <br />
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a runat="server" href="~/">Home</a></li>
                                <li><a runat="server" href="~/About">About</a></li>
                                <li><a runat="server" href="~/Contact">Contact</a></li>
                                <li><a runat="server" href="~/Products">Products</a></li>
                            </ul>
                            <asp:LoginView runat="server" ViewStateMode="Disabled">
                                <AnonymousTemplate>
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a runat="server" href="~/Account/Register">Register</a></li>
                                        <li><a runat="server" href="~/Account/Login">Log in</a></li>
                                    </ul>
                                </AnonymousTemplate>
                                <LoggedInTemplate>
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello !</a></li>
                                        <li>
                                            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/"  />
                                        </li>
                                    </ul>
                                </LoggedInTemplate>
                            </asp:LoginView>
    
                            <div id="somediv">
                                <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                                    style="background-color: #1E5A8C; display: none;">
                                    New Customer</button>
                                <asp:Button ID="Button2" class="button" runat="server" Text="Upload FilesXXX"
                                    Style="background-color: #1E5A8C; display: none; font-weight: bold;"
                                    CssClass="auto-style1" display="none" />
    
                                <asp:Label ID="Label1" runat="server" Text="User" BackColor="#E6AC00" ForeColor="black"></asp:Label>
                            </div>
    
                        </div>
                    </div>
                </div>
                <div class="container body-content" id="contentWrapper">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
                <div id="Footer">
            <p>This my page footer</p>
        </div>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 2:12 AM
  • User409696431 posted

    "I prefer to fix the page so the Footer is not scrolled up when page is scrolled up, if not possible then I would like to hide the Footer."

    It sounds like you are looking for a "sticky footer", one that is at the bottom always for shorter pages, but is below the content for longer pages that scroll.  There are several ways to do that.

    https://css-tricks.com/couple-takes-sticky-footer/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 2:36 AM

All replies

  • User475983607 posted

    The code you shared is basic HTML which has nothing to do with a master or content pages.  It is up to you to write JavaScript to accomplish the task.  We can't see the entire DOM design so there's no way to provide accurate advice.  However, hiding an element is very very simple.

    document.getElementById('Footer').style.display = 'none';

    The trick is you have to add the line of code to your JavaScript application design.

    Sunday, October 4, 2020 10:51 PM
  • User1769015664 posted

    I am using C#

    Here is the entire Site.Master, I need to be able to either hide <div id="Footer" > from a content page or display it in a way that it won't scroll up when content page is scrolled up.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MySite.SiteMaster" %>
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - My Site</title>
    
        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    
        <style>
            #Footer
                {
                    ;
                    bottom: 0px;                      
                    height: 25px;
                    width:100%;
                    background:linear-gradient(90deg, #083b5f 10%, #1E5A8C 35%, #083b5f 80%);
                    color: #eee;
                    vertical-align:middle;
                    text-align: center;
                    margin: auto;
                    margin-top:10px;
                    padding: 0px 0;
                }
        </style>
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="respond" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
    
            <div class="navbar navbar-inverse navbar-fixed-top" 
                style="background:linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                <div class="container" style="background:linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                    <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>
                        <a class="navbar-brand" runat="server" href="~/">
                            <h1 style="display: inline; border:none; color: white;"><img alt="" src="images/HHA_Logo.png" /></h1>
                        </a>
                        <br />
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a runat="server" href="~/">Home</a></li>
                            <li><a runat="server" href="~/About">About</a></li>
                            <li><a runat="server" href="~/Contact">Contact</a></li>
                            <li><a runat="server" href="~/Products">Products</a></li>
                        </ul>
                        <asp:LoginView runat="server" ViewStateMode="Disabled">
                            <AnonymousTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Register">Register</a></li>
                                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                                </ul>
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                    <li>
                                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                    </li>
                                </ul>
                            </LoggedInTemplate>
                        </asp:LoginView>
    
                                <div id="somediv">
                    <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                        style="background-color: #1E5A8C; display:none;">New Customer</button>
                    <asp:Button ID="Button2" class="button" runat="server" Text="Upload FilesXXX" 
                        style="background-color: #1E5A8C; display:none; font-weight:bold;"
                        CssClass="auto-style1" display="none"/>
    
                    <asp:Label ID="Label1" runat="server" Text="User" backcolor="#E6AC00" ForeColor="black"></asp:Label>
            </div>
    
                    </div>
                </div>
            </div>
    
            <div class="container body-content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                </asp:ContentPlaceHolder>
           </div>
        </form>
        <div id="Footer" > 
            <p>This my page footer</p>
        </div>
    </body>
    </html>
    
    Sunday, October 4, 2020 11:08 PM
  • User475983607 posted

    Um yeah, there is nothing in the code you've provided that's of any help.  You have to understand there's no master or content page in JavaScript, there's just the DOM.  It is up to you to design and write a JavaScript application that sets the display according to your requirements.  I can only show you the code that hides the footer.  It is up to you to design and write the JavaScript application to meet your requirements.

    Sunday, October 4, 2020 11:20 PM
  • User1769015664 posted

    I am having trouble understanding you... 

    I created a simple project ant it added Site.Master page Default.aspx with c# code behind (Default.aspx.c). I aded a DIV element (DIV id="Footer") in Site.master.

    In Default.aspx.c, All I am trying to do is to access the DIV element in Site.Master

    Monday, October 5, 2020 2:01 AM
  • User1535942433 posted

    Hi NJ2,

    Accroding to your description and codes,as far as I think,you could add wrapper outside the content and fixed the footer.

    Since you don't post your content to us,I created a demo.Just like this:

     <style>
            #Footer {
                ;
                bottom: 0;
                height: 25px;
                width: 100%;
                background: linear-gradient(90deg, #083b5f 10%, #1E5A8C 35%, #083b5f 80%);
                color: #eee;
                vertical-align: middle;
                text-align: center;
                margin: auto;
                margin-top: 10px;
                padding: 0px 0;
            }
             #contentWrapper {
                ;
                left: 10em;
                top: 5em;
                bottom: 5em;
                right: 0;
                overflow: auto;
            }
    
            #ContentPlaceHolder1 {
                ;
                width: 2000px;
                height: 2000px;
            }
        </style>
    
    <div>
                <div class="navbar navbar-inverse navbar-fixed-top"
                    style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                    <div class="container" style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                        <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>
                            <a class="navbar-brand" runat="server" href="~/">
                                <h1 style="display: inline; border: none; color: white;">
                                    <img alt="" src="images/HHA_Logo.png" /></h1>
                            </a>
                            <br />
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a runat="server" href="~/">Home</a></li>
                                <li><a runat="server" href="~/About">About</a></li>
                                <li><a runat="server" href="~/Contact">Contact</a></li>
                                <li><a runat="server" href="~/Products">Products</a></li>
                            </ul>
                            <asp:LoginView runat="server" ViewStateMode="Disabled">
                                <AnonymousTemplate>
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a runat="server" href="~/Account/Register">Register</a></li>
                                        <li><a runat="server" href="~/Account/Login">Log in</a></li>
                                    </ul>
                                </AnonymousTemplate>
                                <LoggedInTemplate>
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello !</a></li>
                                        <li>
                                            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/"  />
                                        </li>
                                    </ul>
                                </LoggedInTemplate>
                            </asp:LoginView>
    
                            <div id="somediv">
                                <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                                    style="background-color: #1E5A8C; display: none;">
                                    New Customer</button>
                                <asp:Button ID="Button2" class="button" runat="server" Text="Upload FilesXXX"
                                    Style="background-color: #1E5A8C; display: none; font-weight: bold;"
                                    CssClass="auto-style1" display="none" />
    
                                <asp:Label ID="Label1" runat="server" Text="User" BackColor="#E6AC00" ForeColor="black"></asp:Label>
                            </div>
    
                        </div>
                    </div>
                </div>
                <div class="container body-content" id="contentWrapper">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
                <div id="Footer">
            <p>This my page footer</p>
        </div>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 2:12 AM
  • User409696431 posted

    "I prefer to fix the page so the Footer is not scrolled up when page is scrolled up, if not possible then I would like to hide the Footer."

    It sounds like you are looking for a "sticky footer", one that is at the bottom always for shorter pages, but is below the content for longer pages that scroll.  There are several ways to do that.

    https://css-tricks.com/couple-takes-sticky-footer/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 2:36 AM