We have a mobile site (ASP.NET in MVC style) which, among other things, displays a fullscreen HTML slideshow.
To display this, we run code on the mobileHTMLMovie view like so:
$( function() {
$(document).bind('pageinit', function() {
$("header").hide();
$(".subHeader").hide();
$(".subHeaderAccent").hide();
$("footer").hide();
$(".ui-content").css("width", "100%").css("height", "100%").css("margin","0").css("background-color", "#000");
});
});
The problem we're seeing is that when the user pushes the 'back' button (s/he's limited to the hardware controls, as this code disables all the wrapper elements, including our HTML movement buttons) the elements remain hidden.
I have been unable to find a way to run the 'reversal' code (show instead of hide, removing the style attribute from ".ui-content") on the page they land on. The page they land on doesn't run document.ready when they arrive, the movie page doesn't run 'onunload' or 'onbeforeunload', and the other suggestion I've found online (.live('click') on the '[data-rel=back]' element) hasn't worked either.
Does anyone have any suggestions?