This is a migrated thread and some comments may be shown as answers.

Cannot hide footer on logout

4 Answers 40 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Stewart
Top achievements
Rank 1
Stewart asked on 30 Oct 2013, 05:32 PM
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

4 Answers, 1 is accepted

Sort by
0
Pavel Kolev
Telerik team
answered on 31 Oct 2013, 04:08 PM
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.
0
Stewart
Top achievements
Rank 1
answered on 04 Nov 2013, 05:31 PM
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>
0
Accepted
Steve
Telerik team
answered on 07 Nov 2013, 02:30 PM
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.
0
Stewart
Top achievements
Rank 1
answered on 07 Nov 2013, 04:37 PM
Thanks Steve. I managed to get this working in a similar fashion, but appreciate you documenting this here.

Stewart
Tags
General Discussion
Asked by
Stewart
Top achievements
Rank 1
Answers by
Pavel Kolev
Telerik team
Stewart
Top achievements
Rank 1
Steve
Telerik team
Share this question
or