CODEWITHSUNDEEP
javascriptjquerycssmobile-safari
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

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

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

enter image description here

Upvotes: 1

Views: 3967

Answers (3)

mrtsherman
mrtsherman

Reputation: 39872

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();
    }
});

Upvotes: 3

zequinha-bsb
zequinha-bsb

Reputation: 719

EDITED:

var countDown=5;

$('body').click(function() {
   ....
   if (countDown < 1) {
       ...
   }
}

var cleanUp = setInterval(function() {
   countDown--;
   if (countDown < 1) {
       ...
       clearInterval(cleanUp);
   }
},1000);

That should do it!

Upvotes: 0

Sgoettschkes
Sgoettschkes

Reputation: 13189

A short solution is to simply add a click-event to the body and toggle the header and footer on it:

$('body').click(function() {
    $('#header').toggle();
    $('#footer').toggle();
});

See here also: http://jsfiddle.net/Sgoettschkes/yZbTK/4/

To add the "dim" as you call it you could also make a div box with position absolute and a opacitiy, which is also toggled as above. I played around a bit and created this: http://jsfiddle.net/Sgoettschkes/yZbTK/8/

Upvotes: 1

Related Questions