1

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

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

3

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();
    }
});
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • +1 very close. but toolbar not coming back in iPad. I want make this effect work in all latest desktop and mobile browsers. and with touch screen too – Jitendra Vyas Nov 12 '11 at 16:09
  • Works okay on your computer though right? Let me go grab my iPad and see if I can figure out what's going wrong. – mrtsherman Nov 12 '11 at 16:12
  • I just checked in My Android 2.3.6 it working fine in it. So I think only iOS it's not working – Jitendra Vyas Nov 12 '11 at 16:15
  • Try it now, I changed `document` to `html` after I read that iOS doesn't play nice with document. – mrtsherman Nov 12 '11 at 16:16
  • We need to set a new timeout if we fade content in. Otherwise the bars will not automatically hide themselves. Toggle doesn't provide this information. I suppose that we could use its callback function, but then I think its no better than what I currently chose. – mrtsherman Nov 12 '11 at 16:20
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/4932/discussion-between-mrtsherman-and-jitendra-vyas) – mrtsherman Nov 12 '11 at 16:21
  • I need one more thing in it. If user's mouse or finger over on it then it should not disappear. – Jitendra Vyas Dec 13 '11 at 07:40
  • You should probably ask this in a new question @JitendraVyas. I am swamped with the holidays and work. Sorry! – mrtsherman Dec 13 '11 at 15:12
1

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/

Sgoettschkes
  • 13,141
  • 5
  • 60
  • 78
0

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!

zequinha-bsb
  • 719
  • 4
  • 10