Unlocking two features with just a single tap

Question

Unlocking two features with just a single tap

I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section.

To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is done to hide the address bar on the first screen of the kiosk since the initial page/div is an anchor tag.

 $("#item1").append('<div id="pageLayover"></div>');
 $(document).click(function(){ 
     $("#pageLayover").remove(); 
});

Currently, you have to click twice - once to remove the layover and then again for the first page to slide to the second page. Is there a way to achieve both actions with just one click?

You can find my code on jsFiddle. Any suggestions or examples would be greatly appreciated.

Thank you in advance!

javascript jquery html css

Answer 1

Answer №1

Your question seems a bit unclear, but here is a suggestion that might help:

If you want to turn one click on the layover into two clicks, you can trigger the click event of the first panel like so:

$('#pageLayover').live('click', function(e) { // <-- update this line!
  $("#pageLayover").remove(); // remove the layover from the DOM
  $panels.eq(0).click(); // <-- trigger the click event of the first element in $panels
});

Keep in mind that this method does not verify if the click actually happened on the panel.

To address the issue of multiple layovers, you can use the following approach:

$('#wrapper').scrollTo($(this).attr('href'), 800,{
    onAfter: function(id){
        if ($('#pageLayover').length == 0) {             // <--- new check added
            $("#item1").append('<div id="pageLayover"></div>');
        }                                                // <--- new check added

Answer 2

Your question seems a bit unclear, but here is a suggestion that might help:

If you want to turn one click on the layover into two clicks, you can trigger the click event of the first panel like so:

$('#pageLayover').live('click', function(e) { // <-- update this line!
  $("#pageLayover").remove(); // remove the layover from the DOM
  $panels.eq(0).click(); // <-- trigger the click event of the first element in $panels
});

Keep in mind that this method does not verify if the click actually happened on the panel.

To address the issue of multiple layovers, you can use the following approach:

$('#wrapper').scrollTo($(this).attr('href'), 800,{
    onAfter: function(id){
        if ($('#pageLayover').length == 0) {             // <--- new check added
            $("#item1").append('<div id="pageLayover"></div>');
        }                                                // <--- new check added

Unlocking two features with just a single tap

Answer №1

Similar questions

An error message indicating that the page is currently being unloaded has appeared

The persistent loading animation in AngularMaterial Autocomplete does not come to an end

Issue with displaying selected value and options in Mat-select when using formarray - Reactive forms in Angular

What is the best way to choose an HTML element based on the attributes of its child nodes in CSS?

transferring a string parameter from PHP to a JavaScript function

"Retrieve the link that is currently being hovered over using jQuery

passport not initializing session with requests

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

Guide on transferring href parameter from the parent Vue component to the child component

When using res.render to pass data to an EJS file and accessing it in plain JavaScript

Is it possible to exclusively focus on the specified data attributes?

Managing the closest element depending on the selected option in Angular 5

Issue with wrapper not aligning correctly at the top of the screen

Issue with a Bootstrap panel displaying incorrect border formatting

Angular 6: Harnessing the Power of Subject

Saving and accessing AJAX XML responses in sessionStorage

Generate a collection of elements using a different collection as a reference

jquery accordion not functioning properly following partial ajax page refresh

Achieving Centered Items with CSS Flexbox and Positioning

Encountering issues when making API calls from a .NET program