How to hide/show an element by touching/clicking anywhere on the screen?

Question

I'making website which is for all desktop/iPad/iPhone. In one page I have header and footer on the page which will be seen till 5 sec after page load then it will be gone automatically. If We click/touch anywhere on screen it will also like a toggle to show/hide. And when the header and footer will be seen the area of page will be dim like we see in lightboxes.

http://jsfiddle.net/jitendravyas/yZbTK/2/

The effect I want to exactly like iPad default "Photos" app

Answer 1

I think this is what you are after. On initial page load we fade out after x seconds. If user clicks then we fade in toolbar if hidden, or fade it out if shown. If user fades in toolbar, but doesn't do anything for x seconds we fade it back out.

I updated my answer with some improvements.

http://jsfiddle.net/yZbTK/11/

http://jsfiddle.net/yZbTK/11/show - full screen for iPad

I would assign a class to the controls that you will fade in/out. That way you can gather them quickly and easily. The use of id's to identify them really wasn't very good in my initial code example.

var timer;
var timeVisible = 5000;
timeFadeout();

function timeFadeout() {
    timer = setTimeout(function() {
        $('.controls').fadeOut();          
    }, timeVisible );
}

$('html').click(function() {
    clearTimeout(timer);
    if ($('.controls:visible').length) {
        $('.controls').fadeOut();
    }
    else {
        $('.controls').fadeIn();
        timeFadeout();
    }
});