Cannot hide footer on logout

5 posts, 1 answers
  1. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    I am successfully hiding the footer on the first screen of my app, thanks to help on this forum. This is done by this simple process:

    1) Firstly hide the footer on page load with this at the bottom of index.html:

    <script>
        $('#footer').hide();
    </script>

    2) Then on successful login:

    LoginViewModel = kendo.data.ObservableObject.extend({
        isLoggedIn: false,

    onLogin: function () {
        // removed verification code

        that.set('isLoggedIn', true);
        $('#footer').show();
    },


    All good so far. However, I want to hide the footer again on logout, but no matter what I try, the footer won't be hidden!

    onLogout: function () {
        
        // This doesn't work
        var ele = document.getElementById("footer");
        ele.style.display = "none";
            
        // Neither does this
        $('#footer').addClass("changeFooter");

        // Nope, nor this
        $('#footer').hide();
            
        // Do other stuff relating to the logout
    },

    Does anyone have any pointers for me?

    Thanks,
    Stewart
  2. Pavel Kolev
    Admin
    Pavel Kolev avatar
    26 posts

    Posted 31 Oct 2013 Link to this post

    Hello Stewart,

    Could you please check if hiding the footer before any other logout functionality is executed will solve the issue?. Could you isolate it in jsbin , jsFiddle or CodePen to illustrates the issue if possible.

    Regards,
    Pavel Kolev
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 04 Nov 2013 Link to this post

    Hello Pavel,

    I have done some more digging, and proved the issue with this small test. If you load this, you will see that I can show and hide the navigation from the first view (data-title="Home") but not from the second view (data-title="Two").

    No console errors are displayed, and if I add an alert(1) into the functions, this is shown when the links are clicked on the second view, but the navigation is not hidden.

    Any suggestions why this might be?

    <html>
    <head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />

    <script src="cordova.js"></script>
    <script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>

    <script src="scripts/app.js"></script>
    </head>
    <body>

    <!--Home-->
    <div id="tabstrip-home"
    data-role="view"
    data-title="Home">
    <div class="view-content">
    <h1>test page 1</h1>
    <a href="javascript: void(0);" onclick="showNavigation()";>Show navigation</a>
    <a href="javascript: void(0);" onclick="hideNavigation()";>Hide navigation</a>
    </div>
     </div>

    <!--Two-->
    <div id="tabstrip-two"
    data-role="view"
    data-title="Two">

    <div class="view-content">
    <h1>test page 2</h1>
    <a href="javascript: void(0);" onclick="showNavigation()";>Show navigation</a>
    <a href="javascript: void(0);" onclick="hideNavigation()";>Hide navigation</a>
    </div>
    </div>

    <!--Layout-->
    <div id="tabstrip-home" 
    data-role="layout"  
    data-id="tabstrip-layout"
    data-model="app.loginService.viewModel">

    <!--Header-->
    <div data-role="header" style="background-color: white" id="header">
    <div data-role="navbar">
    <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
    <span data-role="view-title"></span>
    <a data-align="right" data-icon="organize" data-role="button" href="#tabstrip-addPost">Comment</a>
    </div>
    </div>

    <!--Footer-->
    <div data-role="footer" id="footer">
    <div data-role="tabstrip">
    <a href="#tabstrip-home" data-icon="home">Home</a>
    <a href="#tabstrip-two" data-icon="organize">Two</a>
    </div>
    </div>

    </div>

    <script>
    // Hide everything on the first screen or when logging out
    function hideNavigation() {
    $('#header').hide();
    $('#footer').hide();
    $("#back-button").hide();
    }

    // Show navigations
    function showNavigation() {
    $('#header').show();
    $('#footer').show();
    $("#back-button").show();
    }

    // Start off with navigation hidden
    hideNavigation();
    </script>

    </body>
    </html>
  4. Answer
    Steve
    Admin
    Steve avatar
    10941 posts

    Posted 07 Nov 2013 Link to this post

    Hi Stewart,

    The problem is with your javascript. The id selector finds only the first element with the specified ID, while in reality you have 2 views with separate headers and footers i.e. you're effectively hiding the header/footer of the first view. Such problems are usually resolved by using class selector instead.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2013 Link to this post

    Thanks Steve. I managed to get this working in a similar fashion, but appreciate you documenting this here.

    Stewart
Back to Top