Ways to toggle the visibility of an element by tapping or clicking anywhere on the screen

Question

Ways to toggle the visibility of an element by tapping or clicking anywhere on the screen

I am creating a website that is compatible with desktop, iPad, and iPhone. On one page, I have a header and footer that are initially visible for 5 seconds after the page loads, then automatically disappear. Users can toggle the visibility of the header and footer by clicking or touching anywhere on the screen. When the header and footer are visible, the rest of the page will be dimmed similar to lightboxes.

If you want to see an example of this effect, you can visit http://jsfiddle.net/jitendravyas/yZbTK/2/

The desired outcome is to replicate the behavior seen in the default "Photos" app on iPad.

javascript jquery css mobile-safari

Answer 1

Answer №1

Here is the solution to your query. When the page loads initially, we have a fade-out effect after a certain number of seconds. If the user clicks, the toolbar will fade in if it's hidden, or fade out if it's already visible. Additionally, if the toolbar is faded in but the user doesn't interact with it for a specified time, it will automatically fade back out.

I have made some enhancements to my previous answer.

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

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

To easily manipulate the controls for fading in and out, it would be beneficial to assign them a specific class. Using IDs to identify them as shown in the initial code example may not be the best approach.


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

Answer 2

Here is the solution to your query. When the page loads initially, we have a fade-out effect after a certain number of seconds. If the user clicks, the toolbar will fade in if it's hidden, or fade out if it's already visible. Additionally, if the toolbar is faded in but the user doesn't interact with it for a specified time, it will automatically fade back out.

I have made some enhancements to my previous answer.

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

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

To easily manipulate the controls for fading in and out, it would be beneficial to assign them a specific class. Using IDs to identify them as shown in the initial code example may not be the best approach.


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

Answer 3

Answer №2

An easy fix is to set up a click event listener on the body element, toggling the visibility of both the header and footer:

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

Check out this example as well: http://jsfiddle.net/Sgoettschkes/yZbTK/4/

If you want to include a "dim" effect, you could create a positioned div with opacity that toggles along with the other elements. I experimented a bit and came up with this solution: http://jsfiddle.net/Sgoettschkes/yZbTK/8/

Answer 4

An easy fix is to set up a click event listener on the body element, toggling the visibility of both the header and footer:

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

Check out this example as well: http://jsfiddle.net/Sgoettschkes/yZbTK/4/

If you want to include a "dim" effect, you could create a positioned div with opacity that toggles along with the other elements. I experimented a bit and came up with this solution: http://jsfiddle.net/Sgoettschkes/yZbTK/8/

Answer 5

Answer №3

UPDATED:

let timer = 5;

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

let cleanupTimer = setInterval(function() {
   timer--;
   if (timer < 1) {
       ...
       clearInterval(cleanupTimer);
   }
},1000);

That should do the trick!

Answer 6

UPDATED:

let timer = 5;

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

let cleanupTimer = setInterval(function() {
   timer--;
   if (timer < 1) {
       ...
       clearInterval(cleanupTimer);
   }
},1000);

That should do the trick!

Ways to toggle the visibility of an element by tapping or clicking anywhere on the screen

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging ng-if in conjunction with ng-bind within AngularJS

Ways to differentiate between buttons in a button cluster?

Press the button to modify the titles of the table

Concealing text in multi-select option of Bootstrap when overflowing horizontally

Creative Text Container CSS Styling

Utilizing JQuery to send both files and text data via ajax请求

The issue with Django's JavaScript functionality is that the dollar sign is not recognized and

Guide on how to add multiple options to a select element in HTML using prototype.js

php json with multiple dimensions

Continue iterating through the range of dates until the first date comes before the second date

Utilize ajaxFileUpload.js to upload 3 images from various input type files in CodeIgniter effortlessly

Troubleshooting problem with Bootstrap 4 columns alignment - issue with nested columns wrapping

How to extract the selected text within an input field using jQuery without relying on external plugins

What is the best way to set a checkbox's default state in a react table using a value from Firestore?

Utilize AJAX to dynamically populate a list in CodeIgniter

Socket.io transmitting [object Object] containing data from a mongoDB document

What is the most efficient way to combine several properties of the same element within an array?

The dropdown menu with Bootstrap's <li> sub menu is not expanding as expected

Have Babel transpile configuration files into CommonJS format

"Utilizing JavaScript, what is the method for obtaining unique values from dataTables and calculating the total of a specific field